Angular Material 2 个响应式表单 -- mat-error with *ngIf 在验证 minLength、电子邮件和所需的验证工作时未显示

Question

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

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

对于必需的验证和电子邮件验证，它工作正常，消息显示，一切都很好，但 minLength *ngIf 根本不显示。

代码：

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),
]);

还有 `ErrorstateMatcher，但它是样板并且有效。

Answer 1

您这边只是一个简单的错字：

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

minLength -> minlength

Angular Material 2 个响应式表单 -- mat-error with *ngIf 在验证 minLength、电子邮件和所需的验证工作时未显示

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

angular-material

angular-material2

angular

angular-reactive-forms