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

Question

Let's say that I have this form structure:

      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(...)]);

The sum_credit is disabled because it's value is always calculated. Now I need to validate that the sum_credit is equaled to sum_debit, and I'm already doing that using validateSomthing function. The problem is that the validateSomthing is not triggered because the control is disabled. How can I fix that?

Thanks

If `sum_credit` is "always calculated", why do you even need to have a validator for it? Feels like you should have a unit (or integration) test instead. — maxime1992, Jul 29 '18 at 09:32
It feels like to me that `sum_credit` shouldn't even be into the form. And when you handle the submit and pass the object, just add the computation of that field. — maxime1992, Jul 29 '18 at 09:33
@maxime1992 you are right, calculated values are already correct values and don't need a validation, but this is not the case here, I don't want to validate the sum_credit itself, I want to make sure that the sum_credit is equaled to sum_debit.. if they are not equaled then I should notify the user to adjust the items values until those values are equaled. — Furqan S. Mahmoud, Jul 29 '18 at 09:44
In case of the latter, you realy need a validator in the group instead of the control. So you should be fine with my answer. — Frederik Prijck, Jul 29 '18 at 16:27

score 16 · Accepted Answer · answered Jul 28 '18 at 21:38

16

Angular doesn't trigger validators for disabled fields. One way to work around this is to apply the validator to the group instead of the control (this will trigger the validator for each update to any, none disabled, form control inside the correspondig group:

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(...) });

Note that you need to adapt your validator function to read the value from the sum_debit control:

validateFn(group: AbstractControl) {
  const control = group.get('sum_debit');
  // here you can validate control.value;
}

answered Jul 28 '18 at 21:38

Frederik Prijck

1,424
10
16

Thanks, for the answer, I just have a question please, is it okay if I assign the validator after the form initialization? because I'm getting an error when I pass this.entryForm to the validatorFn. – Furqan S. Mahmoud Jul 29 '18 at 09:40
It should be fine, however u shouldn't have an error with the way I'm doing it. – Frederik Prijck Jul 29 '18 at 16:26
This is not prevent the form for submitting, means form or field status will not turn to `invalid` hence no proper validation. – Nadeem Jun 04 '19 at 15:07
@Nadeem It is supposed to update the formGroup's (and it's parent groups) validity. – Frederik Prijck Jun 04 '19 at 15:32
Is the statement: "Angular doesn't trigger validators for disabled fields" still real come Angular 6? It seems odd if so, since using a disabled attribute within a reactive form directive leads to this error in the console.log(): form = new FormGroup({ first: new FormControl({value: 'Nancy', disabled: true}, Validators.required), last: new FormControl('Drew', Validators.required) }); ||| Notice that Validators.required is written into to a disabled FormControl. Can somebody confirm? – Sean Halls Jan 07 '20 at 11:08
Yes this is still correct, have a look: https://stackblitz.com/edit/angular-ypwqkm – Frederik Prijck Jan 07 '20 at 12:26
You can see that the validation for the form ignores the disabled control. Try and enable that control and see how suddenly validation does take that control into account. – Frederik Prijck Jan 07 '20 at 12:27
You mention: "Notice that Validators.required is written into to a disabled FormControl". That's correct, as when the control is enabled again (e.g. by a user interaction, like checking a checkbox) validation has to be taken into account without requiring to re-attach that validation. – Frederik Prijck Jan 07 '20 at 12:28
Fwiw, I think this is the part of the Angular framework that's responsible for not marking that control as Invalid, but Disabled instead: https://github.com/angular/angular/blob/master/packages/forms/src/model.ts#L811 – Frederik Prijck Jan 07 '20 at 12:42
doesn't work flop, i have a formgroup with formcontrol validators.required, after i did fromGroup.disabled(), when i submit the form no error of validation show up – selma Feb 19 '20 at 14:29
If you disable the formGroup, it's validators won't be executed. – Frederik Prijck Feb 21 '20 at 08:53

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

1 Answers1

Linked