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

Question

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.

Answer 1

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