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

Question

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

Answer 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>

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

Answer 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>