Question

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

该值不能为空
该值不能是先前定义的值之一（来自数组angular.module('DataStructureVisualizer').controller('DragDropController', function DragDropController($scope) { $scope.captureCoordinate = function($event) { $scope.x = $event.x; $scope.y = $event.y; } });）。

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

forbiddenValues

但是，我如何动态地为我的数组this.titleForm = this.formBuilder.group({ 'title': ['', Validators.required] });添加规则？

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)]]
});

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

2 个答案: