在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 { }
