如何使用响应式表单验证禁用的控件（不触发验证）答案

【问题标题】：How to validate disabled control using reactive forms (validation is not triggered)如何使用响应式表单验证禁用的控件（不触发验证）
【发布时间】：2018-07-28 17:29:57
【问题描述】：

假设我有这个表单结构：

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

谢谢

【问题讨论】：

如果sum_credit 是“总是计算出来的”，为什么你还需要一个验证器呢？感觉你应该有一个单元（或集成）测试。
在我看来，sum_credit 甚至不应该出现在表格中。当您处理提交并传递对象时，只需添加该字段的计算即可。
@maxime1992 你是对的，计算的值已经是正确的值，不需要验证，但这里不是这样，我不想验证 sum_credit 本身，我想确保 sum_credit 等于 sum_debit.. 如果它们不相等，那么我应该通知用户调整项目值，直到这些值相等。
在后者的情况下，您确实需要组中的验证器而不是控件。所以你应该对我的回答没意见。

标签： angular angular-reactive-forms

【解决方案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;
}

【讨论】：

谢谢你的回答，我只是有一个问题，如果我在表单初始化后分配验证器可以吗？因为当我将 this.entryForm 传递给 validatorFn 时出现错误。
应该没问题，但是你不应该对我这样做的方式有错误。
这不会阻止表单提交，意味着表单或字段状态不会变成invalid因此没有正确的验证。
@Nadeem 它应该更新formGroup（及其父组）的有效性。
声明：“Angular 不会触发禁用字段的验证器”在 Angular 6 中仍然存在吗？如果是这样，这似乎很奇怪，因为在响应式表单指令中使用 disabled 属性会导致 console.log() 中出现此错误： form = new FormGroup({ first: new FormControl({value: 'Nancy', disabled: true} , Validators.required), last: new FormControl('Drew', Validators.required) }); |||请注意，Validators.required 被写入禁用的 FormControl。有人可以确认吗？