Angular 2 FormGroup添加验证器动态

时间:2017-04-25 06:50:56

标签: angular angular2-forms

我想在FormContol动态上添加验证器(不是在初始化时)并且它不起作用....

代码:

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

有没有人这样做?

4 个答案:

答案 0 :(得分:25)

试试这个,它应该可行

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}

答案 1 :(得分:4)

虽然Amit Chigadani的回答是正确的,但请记住以下内容。

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

以非专业术语:添加行,如果您希望ng-valid和ng-invalid类自行更新。

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

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

this.formGroup.get("firstName");

答案 2 :(得分:2)

获得了下面的代码可以解决的解决方案。

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

答案 3 :(得分:0)

我最终使用:

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+',
}