表单自定义验证-AngularJs

事实上我觉得 响应式表单必定比模板式表单好用一些

https://angular.cn/guide/form-validation	官方文档
https://angular.cn/generated/live-examples/form-validation/stackblitz.html	demo

自定义验证器-工厂模式，是这样的：

/** A hero's name can't match the given regular expression */
export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} | null => {
    const forbidden = nameRe.test(control.value);
    return forbidden ? {'forbiddenName': {value: control.value}} : null;
  };
}

模板式：

第一步，在模板中添加一个指令。：
providers: [{provide: NG_VALIDATORS, useExisting: ForbiddenValidatorDirective, multi: true}]
第二步：

响应式-自定义：

this.heroForm = new FormGroup({
  'name': new FormControl(this.hero.name, [
    Validators.required,
    Validators.minLength(4),
    forbiddenNameValidator(/bob/i) // <-- Here's how you pass in the custom validator.
  ]),
  'alterEgo': new FormControl(this.hero.alterEgo),
  'power': new FormControl(this.hero.power, Validators.required)
});

验证看起来特别不舒服

https://angular.cn/guide/dynamic-form	动态表单