Perform validation in the form only after losing focus on the Validator angle

Question

I’m using the validations of the reactive forms at the angle, I put a valid email validation, the problem is that while the user is still typing the email already appears the . I would like to know how to only show the error message after losing focus on the email field.

Currently my code is this:

HTML

<mat-form-field class="full-width">
  <input [errorStateMatcher]="matcher" required formControlName="email" matInput placeholder="Email">
    <mat-error>
        Você precisa entrar com um e-mail válido.
    </mat-error>
  </mat-form-field>

TS:

this.formularioLogin = this.fb.group({
  email: ['', Validators.compose([Validators.required, Validators.email])],
  password: ['', Validators.compose([Validators.required])],
});

Errorstatematcher:

export class MyErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isSubmitted = form && form.submitted;
    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
  }

}

Answer 1

Yes, Voce must activate the code in the Onblur event and not in Onclick/Onkeypress as it is currently occurring.

You can also use the .debauch to effectively delay validation.