[分享]如何使用Angular中的自定义校验器

在Angular的开发中表单是必不可少的，由此引出的表单校验也是万万不可缺少的。
解决方法一：
        全部使用ngModel 双向绑定数据，在最后的submit点击时进行所有表单的校验。这样做固然没有什么问题，而且代码写的也和我们之前使用jQuery获取每个id的value一样轻松，唯一的缺点就是缺乏及时的给用户提示，提示哪里没有填写，哪里填写错了，降低了用户系统体验。

解决方法二：
         使用Angular原生的FormControl和FormGroup来组织表单，同时加入系统自带的Validators.required等原生检验器可以满足大部分需求，但是例如 “如何确定checkbox-group中至少要选中一个”这样的校验需求。

这就引入了我们今天的主题：如何创建一个自定义校验器

通过浏览Angular官方文档和源码：

export interface Validator {
    validate(c: AbstractControl): ValidationErrors | null;
    registerOnValidatorChange?(fn: () => void): void;
}

我们需要实现Validator这个接口，并且实现其中的validate方法。

validate方法返回的是ValidationErrors | null ， 返回null 就是校验成功，返回Errors 对象就代表还是有瑕疵。

我们可以看出validate方法接受的参数c 是 AbstractControl 类型的，说明接受的就是FormControl 或者 FormGroup 表单类，我们也都知道FormControl 代表单一的输入字段，它是Angular表单中的最小单元。

FormControl封装了这些字段的值和状态，比如是否有效、是否脏（被修改过）或是否有错误等。

看到这里我们心里就有底了，能获取到当前的表单值何愁校验不了。

import { Directive, forwardRef, Input } from '@angular/core';
import { Validator, AbstractControl, NG_VALIDATORS, ValidationErrors } from '@angular/forms';
@Directive({
  selector: `[checkboxDirective]`,
  providers: [
    {
      provide: NG_VALIDATORS,
      useExisting: forwardRef(() => CheckboxDirective),
      multi: true
    }
  ]
})
export class CheckboxDirective implements Validator {
  constructor() {
  }
  validate(c: AbstractControl): ValidationErrors|null {
    let isCheck = false ;
    if (c) {
        c.value.forEach(element => {
            if (element.checked ) {
                if (!isCheck) {
                    isCheck = true ;
                }
            }
        });
    }
    return isCheck ? null : {'validateCheck': isCheck};
  }
}

以上是我实现的对于checkbox 对象的校验实现。其中的selector：‘checkboxDirective’ 对应的就是下边html代码中的指令名称

<nz-checkbox-group checkboxDirective formControlName ="indicatorIds" [(ngModel)]="indicatorArr" ></nz-checkbox-group>

注意：同时也要将你写的校验器放入要使用的组件的模块（module）的declarations数组中

import { registerLocaleData } from '@angular/common';
import zh from '@angular/common/locales/zh';
import { NZ_I18N, zh_CN } from 'ng-zorro-antd';
import { CheckboxDirective } from '../../@core/directive/CheckboxDirective';

registerLocaleData(zh);

@NgModule({
  imports: [],
  declarations: [CheckboxDirective],
  providers: [
     { provide: NZ_I18N, useValue: zh_CN }],


})
export class ManageCenterModule { }