探索 @angular/forms 源码：深入剖析 Validators 的实现原理

在现代 Web 开发中，表单是必不可少的元素，它用于收集用户输入的数据。为了确保数据的准确性和完整性，表单验证至关重要。Angular 提供了强大的表单验证功能，使开发者能够轻松构建健壮可靠的表单应用。

Angular 表单验证的核心是 Validators，它包含了一系列内置校验器，如 required、minLength、maxLength、pattern 等，还允许开发者创建自定义校验器来满足特定的业务需求。Validators 不仅可以用于模板驱动的表单，还可以用于响应式表单。

一、内置校验器

内置校验器是 Validators 提供的一组常用的校验器，涵盖了常见的表单验证需求。这些校验器包括：

• required ：验证控件是否具有值。
• minLength ：验证控件的值是否达到最小长度。
• maxLength ：验证控件的值是否不超过最大长度。
• pattern ：验证控件的值是否符合正则表达式。
• email ：验证控件的值是否符合电子邮件地址的格式。
• url ：验证控件的值是否符合 URL 的格式。

这些内置校验器使用起来非常简单，只需要在表单控件的 validators 属性中指定即可。例如，以下代码使用 required 校验器验证某个表单控件是否具有值：

this.formBuilder.control('name', Validators.required);

二、自定义校验器

除了内置校验器之外，Angular 还允许开发者创建自定义校验器来满足特定的业务需求。自定义校验器需要实现 ValidatorFn 接口，该接口定义了一个方法，该方法接收一个控件值并返回一个错误对象或 null。

export function myCustomValidator(control: AbstractControl): ValidationErrors | null {
  // 这里进行自定义校验逻辑，并返回错误对象或 null
}

自定义校验器可以使用 @angular/core 中的 Injectable 装饰器进行注入，然后在表单控件的 validators 属性中指定即可。例如，以下代码使用自定义校验器 myCustomValidator 验证某个表单控件：

this.formBuilder.control('name', [Validators.required, myCustomValidator]);

三、校验器组合

Validators 还提供了校验器组合的功能，允许开发者将多个校验器组合起来使用。校验器组合可以使用 and 和 or 操作符实现。

• and ：如果所有校验器都通过，则组合校验器通过。
• or ：如果任何一个校验器通过，则组合校验器通过。

例如，以下代码使用 and 操作符将 required 和 minLength 校验器组合起来使用：

this.formBuilder.control('name', [Validators.required, Validators.minLength(3)]);

四、错误消息处理

当表单控件验证失败时，Angular 会自动生成错误消息。错误消息可以自定义，也可以使用内置的错误消息。

要自定义错误消息，需要在表单控件的 error 属性中指定一个错误对象。错误对象是一个键值对，键是错误类型，值是错误消息。例如，以下代码自定义了 required 校验器的错误消息：

this.formBuilder.control('name', [
  Validators.required,
  {
    error: 'required',
    message: 'Please enter your name.'
  }
]);

五、总结

Validators 是 Angular 表单验证的核心，它提供了一系列内置校验器和创建自定义校验器的方式，还支持校验器组合和错误消息处理。掌握 Validators 的使用，可以帮助开发者轻松构建健壮可靠的表单应用。