Perform validation on the form only after losing focus on angular validator

2

I am using the validations of the reactive forms in the angle, I put a valid email validation, the problem is that while the user is still typing the email already appears. I would like to know how to just 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));
  }

}
    
asked by anonymous 20.12.2018 / 16:08

1 answer

0

Yes, you should have the code activated on the OnBlur event and not on the OnClick / OnKeyPress as it is currently occurring.

You can also use .debounce to effectively defer validation.

    
09.01.2019 / 20:33