angular form表单校验

### Angular 表单校验实现方法

#### 响应式表单中的自定义验证器

为了在 Angular 中为响应式表单创建自定义验证器，可以按照如下方式操作：

1. 定义一个返回 `ValidatorFn` 类型的函数。此函数接收 `AbstractControl` 参数并返回错误对象或 null。

import { AbstractControl, ValidatorFn } from '@angular/forms';

export function customEmailValidator(): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} | null => {
    const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    
    if (!emailPattern.test(control.value)) {
      return {'invalidEmail': true};
    }
    
    return null; // 返回null表示验证通过
  };
}

2. 将该自定义验证器应用到表单项上，在构建表单时作为参数传入。

this.formGroup = this.fb.group({
  'email': ['', [customEmailValidator()]]
});

上述代码展示了如何编写简单的电子邮件格式验证逻辑，并将其应用于名为 "email" 的表单字段中[^1]。

#### 使用内置验证器

除了自定义验证外，Angular 还提供了多种预设好的验证功能，可以直接导入使用。例如必填项(`required`)、最小长度(`minLength`)等常用规则可以通过 Validators 静态类获取。

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

// 构建带有多个内建验证条件的FormGroup实例
const formBuilderInstance = new FormBuilder();
formBuilderInstance.group({
  password: [
    '',
    [
      Validators.required,
      Validators.minLength(8),
      Validators.pattern(/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/)
    ]
  ],
})

这段示例说明了怎样利用 `Validators` 来设置密码强度的要求——至少包含一位数字、一个小写字母以及大写字母，并且总长度不少于八个字符[^2]。

#### 处理表单状态与显示消息

当涉及到向用户提供反馈信息时（比如提示他们哪里出了错），通常会依据 FormControl 对象的状态属性来进行判断。常见的有以下几个重要属性用于控制UI层面上的表现形式：

- **valid**: 如果所有同步和异步验证均成功，则为true；否则false。
- **dirty/touched/pristine/untouched**: 跟踪用户交互情况。
- **errors**: 当前存在的任何验证失败详情列表。

结合以上特性可以在HTML模板里动态调整样式或者渲染特定的消息框给访问者看。

<div *ngIf="passwordField.touched && passwordField.errors?.['required']">
  Password is required.
</div>

这里假设有一个叫作 `passwordField` 的变量指向对应于密码输入域的那个FormControl实体。如果它已经被触碰过而且确实存在'必填'类型的错误记录的话就会显示出相应的警告文字[^3]。