时间戳

首页 > 解决方案 > 如何使用响应式表单验证禁用的控件（不触发验证）

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()
          });
// set validation function to sum_credit

   this.entryForm.controls['sum_credit'].setValidators([CommonValidations.validateSomthing(...)]);

被sum_credit禁用，因为它的值总是被计算出来的。现在我需要验证sum_credit是否等于sum_debit，并且我已经在使用validateSomthing函数执行此操作。问题是validateSomthing没有触发，因为控件被禁用。我该如何解决？

谢谢

标签： angularangular-reactive-forms

解决方案

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

推荐阅读