Как сделать ,чтобы ошибки появлялась только после нажатия на кнопку?

Question

[sciencefront]

сейчас они показываются даже после загрузки страницы

<form action="">
  <div class="item">
    <input  [formControl]="name" type="text" >
    <p *ngIf="name.errors?.['required']">{{name.errors?.['required']}}Поле обязательное</p>
  </div>
  <div class="item">
    <input [formControl]="email" type="text" >
    <p *ngIf="email.errors?.['required']">Поле обязательное</p>
  </div>
  </div>
  <button type="submit" (click)="submit()">btn</button>
</form>

export class ClientForm implements OnInit {

  public form = this.formBuilder.group({
    name: [null, Validators.required],
    email: [null, Validators.required]
  })

  public get name():FormControl {
    return this.form.get('name') as FormControl
  }

  public  get email():FormControl {
    return  this.form.get('email') as FormControl
  }

  constructor(public formBuilder: FormBuilder) {
  }

  ngOnInit(): void {
  }

  submit(): void {
    console.log(this.form.value)
    if(this.form.invalid) {
      console.error('error')
    } else {
      console.log('valid')
    }
    console.log(this.form)
  }


}

Answer 1

[Andrew]

Флажок добавьте.

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>