Angular 中内置验证器有哪一些？

Question

Angular 中提供了一些常用的内置验证器，方便在表单中进行常见的数据验证。这些验证器可以通过 Reactive Forms 或 Template-driven Forms 使用。以下是 Angular 中内置的一些常见验证器：

1. 基本验证器列表

验证器	描述
required	检查控件是否有值，如果为空则验证失败。
requiredTrue	检查控件的值是否为 true ，通常用于复选框的验证。
minLength	检查控件的值的长度是否大于等于指定的最小长度。
maxLength	检查控件的值的长度是否小于等于指定的最大长度。
min	检查控件的数值是否大于等于指定的最小值。
max	检查控件的数值是否小于等于指定的最大值。
email	检查控件的值是否是有效的电子邮件地址格式。
pattern	使用正则表达式验证控件的值是否符合指定的模式。

2. 如何在 Reactive Forms 中使用内置验证器

在使用 Reactive Forms 时，可以在表单控件的初始化中添加这些内置验证器。例如：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-example-form',
  template: `
    <form [formGroup]="form">
      <div>
        <label for="email">Email:</label>
        <input id="email" formControlName="email" />
        <div *ngIf="form.get('email')?.errors?.['email']">Invalid email format.</div>
      </div>

      <div>
        <label for="age">Age:</label>
        <input id="age" type="number" formControlName="age" />
        <div *ngIf="form.get('age')?.errors?.['min']">Age must be at least 18.</div>
      </div>

      <button [disabled]="form.invalid">Submit</button>
    </form>
  `
})
export class ExampleFormComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      email: ['', [Validators.required, Validators.email]],
      age: ['', [Validators.required, Validators.min(18)]],
    });
  }
}

在这个例子中，我们使用了 Validators.required 、 Validators.email 和 Validators.min 来验证电子邮件格式和年龄。

3. 在 Template-driven Forms 中使用内置验证器

在使用模板驱动表单时，可以通过 HTML 属性直接应用这些内置验证器：

<form #form="ngForm">
  <div>
    <label for="email">Email:</label>
    <input id="email" name="email" ngModel required email />
    <div *ngIf="form.controls['email']?.invalid && form.controls['email']?.touched">
      Invalid email format.
    </div>
  </div>

  <div>
    <label for="age">Age:</label>
    <input id="age" type="number" name="age" ngModel required min="18" />
    <div *ngIf="form.controls['age']?.invalid && form.controls['age']?.touched">
      Age must be at least 18.
    </div>
  </div>

  <button [disabled]="form.invalid">Submit</button>
</form>

在模板驱动表单中，可以直接使用 HTML 的属性来实现验证，例如 required 、 min 、 email 等。

小结

Angular 中的内置验证器涵盖了大部分常见的验证需求。你可以轻松地在 Reactive Forms 和 Template-driven Forms 中使用这些验证器，具体包括：

• 必填验证 ： required 和 requiredTrue
• 长度验证 ： minLength 和 maxLength
• 数值范围验证 ： min 和 max
• 格式验证 ： email 和 pattern

这些验证器在表单中提供了强大的基础数据验证能力。