Question

例如，我有一个input，并添加了多个验证条件，例如： 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>

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

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

2 个答案: