我有一个反应式表单，并根据fooRequired我想要将字段设置为必填或非必填的属性。我无法更改它，因为它是初始设置的。那我能做什么呢？fooRequired = false;form = new FormGroup({ foo: new FormControl(null, [Validators.required])});toggle() { this.fooRequired = !this.fooRequired; }
3 回答
开心每一天1111
TA贡献1836条经验 获得超13个赞
下面的方法可以解决这个问题：
toggle() {
this.fooRequired = !this.fooRequired;
this.form.controls.foo.setValidators(this.fooRequired ? null : [Validators.required]);
this.form.controls.foo.updateValueAndValidity();
}
在这里，根据fooRequired布尔值，设置或删除验证器。最后，更新了新的表单控件设置。
慕田峪4524236
TA贡献1875条经验 获得超5个赞
您可以使用自定义函数来负责添加或删除Validators
export function conditionalValidator(
predicate: BooleanFn,
validator: ValidatorFn,
errorNamespace?: string
): ValidatorFn {
return formControl => {
if (!formControl.parent) {
return null;
}
let error = null;
if (predicate()) {
error = validator(formControl);
}
if (errorNamespace && error) {
const customError = {};
customError[errorNamespace] = error;
error = customError;
}
return error;
};
}
然后你可以在表单控件中使用它：
this.myForm = this.fb.group({
myEmailField: [
"",
[
// some normal validatiors
Validators.maxLength(250),
Validators.minLength(5),
Validators.pattern(/.+@.+\..+/),
// custom validation
conditionalValidator(
// depends on fooRequired value
() => this.fooRequired,
Validators.required,
"illuminatiError"
)
]
]
});
最后您可以切换 的值fooRequired并查看结果：
toggle() {
this.fooRequired = !this.fooRequired;
this.myForm.get("myEmailField").updateValueAndValidity();
}
RISEBY
TA贡献1856条经验 获得超5个赞
您需要根据 fooRequired 变量对 foo 表单控件使用setValidator()和。updateValueAndValidity()这两个函数将动态更新验证。
添加回答
举报
0/150
提交
取消