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

Question

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

Answer 1

如果您使用响应式表单，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>

Answer 2

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

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

我建议使用或创建一些 directive/component 来为您显示错误。

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

How do you determine which validator condition failed in angular 8

angular

angular-validation

angular-validator