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
– maxime1992, Commented Jul 29, 2018 at 9: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
– maxime1992, Commented Jul 29, 2018 at 9: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
– Furqan S. Mahmoud, Commented Jul 29, 2018 at 9: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
– Frederik Prijck, Commented Jul 29, 2018 at 16:27

Frederik Prijck · Accepted Answer · 2018-07-28 21:38:20Z

18

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, 2018 at 21:38

Frederik Prijck

1,52910 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Furqan S. Mahmoud Over a year ago

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.

Frederik Prijck Over a year ago

It should be fine, however u shouldn't have an error with the way I'm doing it.

Nadeem Over a year ago

This is not prevent the form for submitting, means form or field status will not turn to invalid hence no proper validation.

Frederik Prijck Over a year ago

@Nadeem It is supposed to update the formGroup's (and it's parent groups) validity.

Sean Halls Over a year ago

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?

|

Collectives™ on Stack Overflow

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

1 Answer 1

11 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Linked

Related