如何使用 FormBuilder 在 Angular 2-4 中动态添加验证器？

Question

我正在使用 FormBuilder 构建表单：

this.myForm = this.fb.group({
  'name': new FormControl(null, Validators.min(5)),
  'description': new FormControl(null, Validators.min(60))
});

问题是我还应该验证它是否需要，我通过这样构建的地图从配置中获取它：

map = new Map<string, boolean>();
map.set('name', true);
map.set('description', false);

问题可以解决如下：

this.myForm = this.fb.group({
  'name': this.map.get('name') ? new FormControl(null, Validators.compose([Validators.required, Validators.min(5)])) : new FormControl(null, Validators.min(5)),
  'description': this.map.get('description') ? new FormControl(null, Validators.compose([Validators.required, Validators.min(60)])) : new FormControl(null, Validators.min(60))
});

这行得通，但想象一下，在具有多个字段的多个表单的大型应用程序中，这种方式真的很不舒服。理想情况下，它看起来像这样：

Object.keys(this.myForm.controls).forEach(key => {
  if (map.get(key)) {
    this.myForm.get(key).setValidators(this.myForm.get(key).getValidators().push(Validators.required))
  }
});

这种方式当然行不通。因此，如果有人已经解决了这个问题或者有一个很好的方法来做上面描述的事情，我会非常感谢你。先谢谢了！！！

更新：问题可以简化为“如何获取与 FormControl 关联的所有验证器”。我认为这个问题没有明确的解决方案 --> https://github.com/angular/angular/issues/13461

Answer 1

这是一个简单的解决方案，我在 cmets 中解释了它：

Object.keys(this.myForm.controls).forEach(key => {
        // if it needs to be required 
        if (map.get(key)) {
            // you have first to check if it already contains validator.required.
            let validators = this.myForm.controls[key].validator(this.myForm.controls[key]);
            // if it contains it -> {required: true};
            // if it doesn't contains it you can now add the required validator
            if(validators && !validators.required){
                let exisitingValidators = this.myForm.controls[key].validators;        
                this.myForm.controls[key].setValidators(Validators.compose([...existingValidators ,Validators.required]));
                // call updateValueAndValidity to apply the new validators on the control
                this.myForm.controls[key].updateValueAndValidity();                
        }
    });

希望对你有帮助:)

Answer 2

刚刚清理/重构了上面的代码。创建作曲家函数 请看一下

// composer function
const composer = (control: FormControl, ...validators) => {
  control.setValidators(Validators.compose([...validators]));
}

for (let name of Object.keys(grp)) {
  let control = this.heroForm.controls[name];
  if (map.has(name)) {
    let validators = control.validator(control);
    if (validators && !validators.required) {
      let exisitingValidators = control.validators;
      composer(control, ...exisitingValidators, Validators.required);
    }
  }
}