时间戳

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

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

问题描述

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>

TS：

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

还有 `ErrorstateMatcher 但它是样板文件并且可以工作。

标签： angularangular-materialangular-material2reactive-forms

解决方案

只是你的一个简单的错字：

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

minLength->minlength

推荐阅读