我为什么要使用Validators.compose()？

Question

我有一个字段,我想用多个验证器验证.
使用Module Driven方法,代码看起来像这样:

this.exampleForm = this.fb.group({
    date_start : ['', Validators.compose([
                          Validators.required, 
                          Validators.pattern("[0-9]{2}-[0-9]{2}-[0-9]{4}")
                      ])
                 ]
})

但是我也可以在没有Validators.compose()的情况下编写这个:

this.exampleForm = this.fb.group({
    date_start : ['', [
                          Validators.required, 
                          Validators.pattern("[0-9]{2}-[0-9]{2}-[0-9]{4}")
                      ]
                 ]
})

它工作得很好.我个人比较喜欢第二个版本(无撰写),更少的代码和更好的可读性.这就引出了一个问题,我为什么要使用Validators.compose()？

Answer 1

我知道这是一个古老的问题，但它出现在最近的搜索中。

您可能想要使用的主要原因Validators.compose()是重用多个验证器。假设你想检查一个值是否在 0 到 100 之间。第一次，你会写：

this.form = this.fb.group({
  foo: [ 0, [ Validators.min(0), Validators.max(100)]]
});

现在假设您想在应用程序的多个位置执行此操作。为了避免代码重复，您可以通过简单地从现有验证器组合它来创建自己的验证器，公开它并在您需要的任何地方重用它：

// custom-validators.ts
import { Validators } from '@angular/forms';
export class CustomValidators {
  readonly betweenZeroHundred = Validators.compose([
    Validators.min(0),
    Validators.max(100),
  ]);
}

// form1 
this.form = this.fb.group({
  foo: [ 0, [CustomValidators.betweenZeroHundred()]]
});

// form2
this.form = this.fb.group({
  bar: [ 100, [CustomValidators.betweenZeroHundred()]]
});

如今，使用扩展运算符，您可以实现类似的结果，而无需compose()：

export class CustomValidators {
  readonly betweenZeroHundred = [Validators.min(0), Validators.max(100)];
}

this.form = this.fb.group({
  bar: [ 100, [...CustomValidators.betweenZeroHundred, Validators.required]]
});

最后，关键在于哪种方法更适合您的团队和您的情况。

Answer 2

当我们创建new FormControl/FormGroup/FormArray（AbstractControl）时- coerceToValidator被调用。

function coerceToValidator(
    validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions | null): ValidatorFn|
    null {
  const validator =
      (isOptionsObj(validatorOrOpts) ? (validatorOrOpts as AbstractControlOptions).validators :
                                       validatorOrOpts) as ValidatorFn |
      ValidatorFn[] | null;

  return Array.isArray(validator) ? composeValidators(validator) : validator || null;
}

export function composeValidators(validators: Array<Validator|Function>): ValidatorFn|null {
  return validators != null ? Validators.compose(validators.map(normalizeValidator)) : null;
}

因此，在将验证器传递给AbstractControl之前，无需组成验证器。

feat(forms): compose validator fns automatically if arrays从现在开始添加了6/13/16，Validators.compose是为了向后兼容。