Validators如何创建和应用于表单验证

Validators 可以通过 Angular 中的 Validators 类来创建和应用于表单验证。

1. 导入 Validators 类：

import { Validators } from '@angular/forms';

2. 创建 Validators： 可以使用 Validators 类中的一些静态方法来创建 Validators，例如：

• Validators.required：用于验证输入是否为空
• Validators.minLength：用于验证输入的最小长度
• Validators.maxLength：用于验证输入的最大长度
• Validators.pattern：用于验证输入是否符合指定的正则表达式

例如，创建一个验证输入是否为必填项的 Validator：

const requiredValidator = Validators.required;

3. 应用 Validators 到表单控件： 在 Angular 表单中，可以通过 Validators.required、Validators.minLength、Validators.maxLength、Validators.pattern 等方法来添加 Validators 到表单控件中。

例如，在模板中使用 Validators.required 验证一个输入框：

<input type="text" formControlName="name" [ngClass]="{'is-invalid': submitted && form.controls.name.errors}">
<div *ngIf="submitted && form.controls.name.errors">
  <small *ngIf="form.controls.name.errors.required">Name is required</small>
</div>

4. 自定义 Validator： 除了使用 Validators 类提供的静态方法外，也可以自定义 Validator。自定义 Validator 是一个函数，接受一个 FormControl 参数，返回一个对象，表示验证结果。例如，创建一个自定义 Validator，验证输入的值是否为数字：

function numberValidator(control: FormControl) {
  const value = control.value;
  if (isNaN(value)) {
    return { 'notANumber': true };
  }
  return null;
}

然后在表单控件中应用该自定义 Validator：

this.form = this.fb.group({
  number: ['', [Validators.required, numberValidator]]
});

通过以上步骤，就可以创建和应用 Validators 到表单验证中。