我有一个React式表单,基于属性fooRequired
,我想将字段设置为必填或非必填。
我不能改变它,因为它是初始设定的。那我该怎么办?
fooRequired = false;
form = new FormGroup({
foo: new FormControl(null, [Validators.required])
});
toggle() { this.fooRequired = !this.fooRequired; }
我有一个React式表单,基于属性fooRequired
,我想将字段设置为必填或非必填。
我不能改变它,因为它是初始设定的。那我该怎么办?
fooRequired = false;
form = new FormGroup({
foo: new FormControl(null, [Validators.required])
});
toggle() { this.fooRequired = !this.fooRequired; }
3条答案
按热度按时间qrjkbowd1#
下面的方法可以解决这个问题:
这里,根据
fooRequired
布尔值设置或删除验证器,最后更新新的表单控件设置。a5g8bdjr2#
您可以使用一个负责添加或删除
Validators
的自定义函数然后,您可以在表单控件中使用它:
最后,您可以切换
fooRequired
的值并查看结果:下面的a live demo将帮助您实现上述答案
whlutmcx3#
你需要根据fooRequired变量为foo表单控件使用
setValidator()
和updateValueAndValidity()
,这两个函数将动态更新验证。演示:https://stackblitz.com/edit/angular-setvalidators-jec7jo?file=src%2Fapp%2Fapp.component.ts
更多阅读内容:https://www.tektutorialshub.com/angular/how-to-add-validators-dynamically-using-setvalidators-in-angular/