Angular Material 2 Reactive Forms -- mat-error with *ngIf 在验证 minLength、电子邮件和所需的验证工作时未显示

Mic*_*elB 5 angular-material angular-material2 reactive-forms angular

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

这实际上是官方的 Angular Material 示例分叉并更改了逻辑以显示针对 minLength 验证而不是电子邮件的 mat 错误。

它适用于必需的验证和电子邮件验证,并且消息显示并且一切正常,但是 minLength *ngIf 根本不显示。

代码:

HTML:

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

TS:

emailFormControl = new FormControl('', [
  Validators.required,
  Validators.minLength(10),
]);
Run Code Online (Sandbox Code Playgroud)

还有`ErrorstateMatcher,但它是样板文件并且有效。

pen*_*han 6

最后只是一个简单的错字:

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

minLength -> minlength