11.2.5 - 自定义同步表单验证器

• 自定义验证器的类型是 TypeScript 类
• 类中包含具体的验证方法，验证方法必须为静态方法
• 验证方法有一个参数 control，类型为 AbstractControl。其实就是 FormControl 类的实例对象的类型
• 如果验证成功，返回 null
• 如果验证失败，返回对象，对象中的属性即为验证标识，值为 true，标识该项验证失败
• 验证方法的返回值为 ValidationErrors | null

  创建一个自定义验证器

  ```typescript // 新建 src/app/myValidators.ts 文件 import { AbstractControl, ValidationErrors } from “@angular/forms”

// 定义一个类 export class myValidators { // 字段值中不能包含空格，必须是静态方法 static static cannotContainSpace(control: AbstractControl): ValidationErrors | null { // 验证未通过 if (/\s/.test(control.value)) return { cannotContainSpace: true } // 验证通过 return null } }

```typescript
// src/app/validators/validators.component.ts
import { myValidators } from '../myValidators';
contactForm: FormGroup = new FormGroup({
    name: new FormControl("", [
        Validators.required,
        // 在这个数组中的验证都是同步规则
        myValidators.cannotContainSpace
    ])
})

<div *ngIf="name.touched && name.invalid && name.errors">
    <div *ngIf="name.errors?.['cannotContainSpace']">姓名中不能包含空格</div>
</div>