Mat-Error не отображает фактическое сообщение в реактивных формах при превышении проверки maxLength. Angular Материал

Question

Я вижу, что моя проверка для элемента управления формы textarea становится красной, когда она превышает 100 символов, однако фактическое сообщение об ошибке mat не отображается. Он отлично работает для требуемой проверки. [EDIT] Правильный ответ решается первым ответом ниже. "maxlength" - это необходимый синтаксис.

.ts

 descriptionFormGroup: FormGroup;
 descriptionCtrl = new FormControl('', [Validators.required, Validators.maxLength(100)]);

 this.descriptionFormGroup = this._formBuilder.group({
  descriptionCtrl: ['', [Validators.required, Validators.maxLength(100)]]
  });
  matcher = new MyErrorStateMatcher();

HTML ФАЙЛ

<form [formGroup]="descriptionFormGroup" class="center-flex-wrapper">
        <ng-template matStepLabel>Description</ng-template>
        <mat-form-field>
            <mat-label>Description</mat-label>
            <textarea matInput formControlName="descriptionCtrl" placeholder="Your Description" required [errorStateMatcher]="matcher"></textarea>
            <mat-hint>Max length is 100 characters</mat-hint>
            <mat-error *ngIf="descriptionFormGroup.controls.descriptionCtrl.hasError('maxLength')">Max length exceeded</mat-error>
            <mat-error *ngIf="descriptionFormGroup.controls.descriptionCtrl.hasError('required')">Description is required</mat-error>
        </mat-form-field>
    </form>   

Сопоставление состояний ошибки

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

Строка hasError для maxLength полностью строчная.

Итак, это

descriptionFormGroup.controls.descriptionCtrl.hasError('maxLength')

Должно быть:

descriptionFormGroup.controls.descriptionCtrl.hasError('maxlength')