Angular2 表单校验 - 自定义校验

曾自己借助阿里云和hexo搭了个站点，现已废弃，过往写的博客暂挪到此处。

---

title: Angular2 表单校验
subtitle: 自定义校验
date: 2016-10-06 00:01:17
tags:
- 技术
- Angular2

---

参考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也有待研究，水很深。