您如何确定角度 8 中哪个验证器条件失败答案

【问题标题】：How do you determine which validator condition failed in angular 8您如何确定角度 8 中哪个验证器条件失败
【发布时间】：2019-06-26 09:44:31
【问题描述】：

例如，我有一个 input ，我添加了多项验证条件，例如： required , mail 和 pattern ，所以任何一个失败都会导致controls.status给我“INVALID”，如果我想知道哪个失败了怎么办？

【问题讨论】：

您使用的是模板驱动表单还是响应式表单？
写入 .html {{control?.errors|json}} 你会看到错误

标签： angular angular-validation angular-validator

【解决方案1】：

在使用模板驱动表单时显示错误：

<input type="text" 
       id="name"
       required
       [(ngModel)]="model.name" 
       name="name"
       #name="ngModel">
<div>{{name.errors | json}}</div>

在使用响应式表单时显示错误：

<form [formGroup]="profileForm">
  <label>
    First Name:
    <input type="text" formControlName="firstName">
  </label>
  <div>{{profileForm.get('firstName').errors | json}}</div>
</form>

我建议使用或创建一些会为您显示错误的指令/组件。

【讨论】：

【解决方案2】：

如果你使用响应式表单，hasError函数检查验证器类型，这是一个例子：

<input matInput placeholder="First Name" autocomplete="off" [formControl]="firstName" name="fname" required>

<mat-error *ngIf="firstName.hasError('required')">
    First Name is required.
</mat-error>
<mat-error *ngIf="firstName.hasError('minlength')">
    First Name is too short.
</mat-error>
<mat-error *ngIf="firstName.hasError('maxlength')">
    First Name is too long.
</mat-error>

【讨论】：