我想在FormContol动态上添加验证器(不是在初始化时)并且它不起作用....
代码:
this.formGroup.controls["firstName"].validator = Validators.Required;
有没有人这样做?
答案 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+',
}