如何使用反应形式验证禁用的控件（未触发验证）

Question

假设我有这个表单结构：

      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 没有被触发，因为控件被禁用了。我该如何解决？

谢谢

Answer 1

Angular 不会触发禁用字段的验证器。解决此问题的一种方法是将验证器应用于组而不是控件（这将触发验证器每次更新任何，none禁用，对应组内的表单控件：

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

如何使用反应形式验证禁用的控件（未触发验证）

How to validate disabled control using reactive forms (validation is not triggered)

angular

angular-reactive-forms