使用带有 Angular 中禁止的表单值的数组进行表单验证

Question

我正在研究一个简单的 Angular 表单，它有两个验证器规则：

1. 该值不得为空
2. 该值不能是先前定义的值之一(来自数组 forbiddenValues (。

我知道我可以轻松添加所需的验证器，如下所示：

this.titleForm = this.formBuilder.group({
  'title': ['', Validators.required]
});

但是，如何为我的数组forbiddenValues动态添加规则？

Answer 1

你需要创建一个某种工厂进行验证(实际上只是一个lambda(：

this.titleForm = this.formBuilder.group({
   'title': ['', [Validators.required, (control: AbstractControl) => {
       return this.forbiddenValues.indexOf(control.value) === -1 ? null : {'forbiddenValue': true};
    }]
});

但是，您需要在每次禁止的值更改时手动触发表单验证，使用this.titleForm.updateValueAndValidity()

Answer 2

如果您想

将验证功能集中在多个地方，这可以为您工作。

import { FormGroup, FormBuilder, Validators, AbstractControl, ValidatorFn } from '@angular/forms';
function isForbidden(forbiddenValues: string[]): ValidatorFn {
  return (c: AbstractControl): { [key: string]: boolean } | null => {
    if (forbiddenValues.indexOf(c.value) !== -1) {
      return { 'forbiddenValues': true };
    }
    return null;
  };
}
@Component({...
this.titleForm = this.formBuilder.group({
  'title': ['', [Validators.required, isForbidden(this.forbiddenValues)]]
});