您如何确定在 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>