CODEWITHSUNDEEP
angularangular-materialangular-material2angular-reactive-forms
SebastianG
SebastianG

Reputation: 9554

Angular Material 2 Reactive Forms -- mat-error with *ngIf not showing when validating for minLength, email and required validation works

Stackblitz: https://stackblitz.com/angular/nvpdgegebrol

This is literally the official Angular Material example forked and changed the logic to show the mat error against minLength validation instead of email.

It works fine for required validation and email validation and the message shows up and all is good but with minLength *ngIf simply does not show.

Code:

HTML:

<mat-error *ngIf="emailFormControl.hasError('minLength') && !emailFormControl.hasError('required')">
  Please enter a valid email address
</mat-error>

TS:

emailFormControl = new FormControl('', [
  Validators.required,
  Validators.minLength(10),
]);

There's also the `ErrorstateMatcher but it's boilerplate and works.

Upvotes: 5

Views: 11000

Answers (1)

penleychan
penleychan

Reputation: 5470

Just a simple typo on your end:

<mat-error *ngIf="emailFormControl.hasError('minlength') &&
   !emailFormControl.hasError('required')">
   Please enter a valid email address
 </mat-error>

minLength -> minlength

Upvotes: 8

Related Questions