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

Question

我有一个要用多个验证器验证的字段。

使用模块驱动的方法，代码如下所示：

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

创建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之前，不需要编写验证器。

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

Answer 2

我知道这是个老生常谈的问题，但这是在最近的一次调查中提出的。

您可能希望使用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]]
});

最后，这取决于哪种方法更适合您的团队和您的情况。