曾自己借助阿里云和hexo搭了个站点，现已废弃，过往写的博客暂挪到此处。
title: Angular2 表单校验
subtitle: 自定义校验
date: 2016-10-06 00:01:17
tags:
- 技术
- Angular2
内置校验
标准html里的校验规则都有对应的angular的内置校验
- required
- minlength
- maxlength
- pattern
这些校验在模板驱动表单和Reactive表单中都可以使用：
首先需要我们的angular module中导入FormsModule；
在模板中直接使用同名的指令；
在reactive表单中，在组件中以Validators.required的方式调用。当然需要导入Validators
函数方式
该方式可用于reactive表单，组件中使用
不用传参的校验
function validateEmail(c: FormControl) {
let EMAIL_REGEXP = ...
return EMAIL_REGEXP.test(c.value) ? null : {
validateEmail: {
valid: false
}
};
}
函数入参为校验元素的control，在使用该校验的时候自动传入；
函数返回值：如果是valid则返回null；否则返回错误校验对象：
{校验key：校验结果}
校验结果比如 {valid:false}
需要传参的校验：工厂函数
/** A hero's name can't match the given regular expression */
export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
return (control: AbstractControl): {[key: string]: any} => {
const name = control.value;
const no = nameRe.test(name);
return no ? {'forbiddenName': {name}} : null;
};
}
该函数返回一个校验函数；
该函数的入参为校验的时候需要传入的参数，比如此例中为不接受的名字；
返回的校验函数的入参为需要校验的元素control。
该校验函数返回最终校验结果，同上面不用传参的校验的返回结果。
自定义校验指令
@Directive({
selector: '[forbiddenName]',
providers: [{provide: NG_VALIDATORS, useExisting: ForbiddenValidatorDirective, multi: true}]
})
export class ForbiddenValidatorDirective implements Validator, OnChanges {
@Input() forbiddenName: string;
private valFn = Validators.nullValidator;
ngOnChanges(changes: SimpleChanges): void {
const change = changes['forbiddenName'];
if (change) {
const val: string | RegExp = change.currentValue;
const re = val instanceof RegExp ? val : new RegExp(val, 'i');
this.valFn = forbiddenNameValidator(re);
} else {
this.valFn = Validators.nullValidator;
}
}
validate(control: AbstractControl): {[key: string]: any} {
return this.valFn(control);
}
}
ForbiddenValidatorDirective必须为一个有validate方法的类。
待研究
http://blog.thoughtram.io/angular/2016/03/14/custom-validators-in-angular-2.html
这篇文章中讲到两种方式，所以最初我想分类为：函数方式和类的方式（同目前的自定义校验指令）
这篇文章还推荐使用类的方式。
但是第一种方式没看到他实现指令的具体代码，angular官网也并没有提到，还有第二种方式我还不确定除了用于指令，还能不能用于reactive表单，在组件内使用。
Google也没搜到其他讲到这个的文档，等angular2官网吧。
还有@Directive也有待研究，水很深。
