Question

上下文：我正在为我的表单重量级Angular 2应用添加验证，该应用使用Template-Driven forms方法。这意味着我需要为自定义验证规则编写指令。

虽然一些验证器相当普遍，并且可以跨组件重复使用（日期值在另一个日期值之前），但不可避免地会出现一次性问题。仅针对特定组件的验证。为每个创建自定义验证指令似乎有点矫枉过正。

问题： 我想出了一个带ValidatorFn的指令（下面的代码）。这允许在组件类中指定验证函数，并在组件之间重用该指令。这似乎工作得很好，但我感觉这太简单了＃34; - 必须有一个原因，为什么它没有内置到Angular 2 Forms模块中。

有谁知道为什么这样的指令是好/坏的理由？

指令代码：

export const FUNCTION_VALIDATOR: any = {
  provide: NG_VALIDATORS,
  useExisting: forwardRef(() => FunctionValidator),
  multi: true
};

@Directive({
  selector: '[validationFn][formControlName],[validationFn][formControl],[validationFn][ngModel]',
  providers: [FUNCTION_VALIDATOR],
  host: {'[attr.validationFn]': 'validationFn ? validationFn : null'}
})
export class FunctionValidator implements Validator, OnChanges {
  private validator: ValidatorFn;
  private onChange: () => void;

  @Input() validationFn: ValidatorFn;

  private createValidator() { this.validator = this.validationFn; }

  ngOnChanges(changes: SimpleChanges) {
    if (changes['validationFn']) {
      this.createValidator();
      if (this.onChange) this.onChange();
    }
  }

  validate(c: AbstractControl): {[key: string]: any} {
    return this.validator ? this.validator(c) : null;
  }

  registerOnChange(fn: () => void) { this.onChange = fn; }
}

采用函数的验证指令 - 一个好主意？

0 个答案: