如何使用反应式表单验证禁用的控件(不触发验证)
如何使用反应式表单验证禁用的控件(不触发验证)
提问于 2018-07-29 01:29:58
假设我有这样的表单结构：
this.entryForm = this.formBuilder.group({
date: [{value:'' , disabled: true}, [Validators.required]],
notes: [''],
sum_credit: [{value:'', disabled: true }],
sum_debit: [{value:'', disabled: true}],
items: this.initItems()
});
// set validation function to sum_credit
this.entryForm.controls['sum_credit'].setValidators([CommonValidations.validateSomthing(...)]);sum_credit被禁用，因为它的值总是被计算出来的。现在我需要验证sum_credit是否等于sum_debit，并且我已经在使用validateSomthing函数来验证了。问题是validateSomthing没有被触发，因为控件被禁用了。我怎么才能修复它呢？
谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-29 05:38:20
Angular不会为禁用的字段触发验证器。解决此问题的一种方法是将验证器应用于组而不是控件(这将在每次更新时触发验证器，每次更新对应的摘要组中的任何表单控件，均未禁用：
this.entryForm = this.formBuilder.group({
date: [{value:'' , disabled: true}, [Validators.required]],
notes: [''],
sum_credit: [{value:'', disabled: true }],
sum_debit: [{value:'', disabled: true}],
items: this.initItems()
}, { validator: CommonValidations.validateSomthing(...) });请注意，您需要调整您的验证器函数以从sum_debit控件中读取值：
validateFn(group: AbstractControl) {
const control = group.get('sum_debit');
// here you can validate control.value;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51573707
复制相关文章
相似问题