Angular 2 FormGroup 添加验证器动态

Posted 2023-03-13

【中文标题】Angular 2 FormGroup 添加验证器动态

【英文标题】：Angular 2 FormGroup Add Validators dynamic

【发布时间】：2017-09-22 01:13:13

【问题描述】：

我正在尝试将验证器添加到 FormContol 动态（不在初始化时），但它不起作用....

代码：

this.formGroup.controls["firstName"].validator = Validators.Required;

有人做过吗？

【参考方案1】：

虽然 Amit Chigadani 的回答是正确的，但请记住以下几点。

虽然此解决方案适用于更新验证器，但新的验证器本身不会运行，直到您更改表单字段值。因此建议在更新验证器后直接运行以下函数；)

通俗地说：添加一行，如果您希望您的 ng-valid 和 ng-invalid 类自行更新。

this.formGroup.controls["firstName"].setValidators([Validators.required, Validators.minLength(2)]);
this.formGroup.controls["firstName"].updateValueAndValidity();

如果你只想更新这个单一控件的值和有效性，那么添加这个选项

this.formGroup.controls["firstName"].setValidators([Validators.required, Validators.minLength(2)]);
this.formGroup.controls["firstName"].updateValueAndValidity(onlySelf: true);

另一个旁注。在 Angular2 中，不应该使用数组语法来获取表单组控件，但是这个

this.formGroup.get("firstName");

也接受点符号

this.formGroup.get("userSectionFormGroup.firstName");

【讨论】：

谢谢，伙计！我很生气，我的提交在添加 required 验证后不会被禁用！并且删除后无法启用！

很高兴为您提供帮助:)

【参考方案2】：

我最终使用了：

export function getValidatorFnArray(obj): ValidatorFn[] 

  const validators = [];

  if (obj.required || obj.required === '' ) 
    validators.push(Validators.required);
  
  if (obj.minLength) 
    validators.push(Validators.minLength(parseInt(obj.minLength, 10)));
  
  if (obj.maxLength) 
    validators.push(Validators.maxLength(parseInt(obj.maxLength, 10)));
  
  if (obj.pattern) 
    validators.push(Validators.pattern(obj.pattern));
  
  if (obj.email || obj.email === '') 
    validators.push(Validators.email);
  

  return validators

obj 可能类似于：

validation:  
  required: '',
  pattern: '\d+',

【参考方案3】：

试试这个，应该可以的

this.formGroup.controls["firstName"].setValidators(Validators.required);

对于多个验证器

this.formGroup.controls["firstName"].setValidators([Validators.required, Validators.minLength(2)]);

但这样做会覆盖初始化期间提供的任何验证器

编辑：

要立即反映带有新添加的Validators 的表单控件，我们必须在动态设置验证器后调用this.formGroup.controls["firstName"].updateValueAndValidity();。

this.formGroup.controls["firstName"].setValidators(Validators.required);
this.formGroup.controls["firstName"].updateValueAndValidity();

DEMO 相同

* 注意 *

updateValueAndValidity() 将触发 valueChanges 事件，即使值没有真正改变（如果您从 valueChanges 订阅中调用它，可能会导致无限循环）。您可以通过使用可选参数对象来防止这种情况发生： onlySelf: true, emitEvent: false

【参考方案4】：

得到了我们可以用下面的代码做的解决方案。

const validators = new Array<Validators>();
          validations.forEach(validation => 
            switch (validation.Type) 
              case 'required':
                validators.push(Validators.required);
                break;
              case 'minLength':
                validators.push(Validators.minLength(parseInt(validation.Expression, 10)));
                break;
              case 'maxLength':
                validators.push(Validators.maxLength(parseInt(validation.Expression, 10)));
                break;
              case 'pattern':
                validators.push(Validators.pattern(validation.Expression));
                break;
            
          );
          this.form.controls[i].setValidators(validators);
 
      
    );

【讨论】：

非常有用的“模式”和“最大/最小长度”示例，使用“.Expression”！谢谢！

顺便说一句，“validators”类型应该是“ValidatorFn”而不是“Validators”。 ;-) 至少在 Angular V6 中 - 不知道以前的，如果验证器已经是函数......