angular - 如何使用 react 形式验证禁用的控件(未触发验证)

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 不会触发禁用字段的验证器。解决此问题的一种方法是将验证器应用到组而不是控件(这将触发验证器每次更新到相应组内的任何未禁用的表单控件:

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