Флажок добавьте.
export class ClientForm implements OnInit {
isSubmitted: boolean = false;
submit(): void {
console.log(this.form.value)
this.isSubmitted = true;
if(this.form.invalid) {
console.error('error')
} else {
console.log('valid')
}
console.log(this.form)
}
<form action="">
<div class="item">
<input [formControl]="name" type="text" >
<p *ngIf="isSubmitted && name.errors?.required">Поле обязательное</p>
</div>
<div class="item">
<input [formControl]="email" type="text" >
<p *ngIf="isSubmitted && email.errors?.required">Поле обязательное</p>
</div>
</div>
<button type="submit" (click)="submit()">btn</button>
</form>
Еще обычно делают getter для всей формы,а не каждого поля в этой форме.
get cForm() {
return this.form.controls;
}
<p *ngIf="cForm.email.errors?.required">Поле обязательное</p>
<p *ngIf="cForm.name.errors?.required">Поле обязательное</p>
Edit: (click) на button[type='submit'] не вешайте.
на форму (сабмит) вешайте.
<form action="" (submit)='submit()'>
<div class="item">
<input [formControl]="name" type="text" >
<p *ngIf="isSubmitted && name.errors?.required">Поле обязательное</p>
</div>
<div class="item">
<input [formControl]="email" type="text" >
<p *ngIf="isSubmitted && email.errors?.required">Поле обязательное</p>
</div>
</div>
<button type="submit">btn</button>
</form>
