angularform-controlformgroupsangular15

How to disable an input FormControl in a Reactive Form with a condition in Angular 15?

I have a form where I can input a student Id. Below that are two input boxes, full name and email. When I load the page, only the student Id input box should be enabled and the two inputs below it are disabled. When I enter the student Id and if it has a record, that's the only time that the input boxes for the full name and email are enabled.

When I used Angular 13, it was able to work with this for each input

[attr.disable]="!isStudentIdReal"

However, I recently updated to Angular 15 and this stopped working. I was able to find a solution where:

studentName : [{value: '', disable: true}],
email : [{value: '', disable: true}]

This disabled the input boxes however, it won't enable them because I don't have a condition.

Solution

  • There is a breaking change about that in angular 15.

    You will need to import the ReactiveFormsModule with a config to restore the previous behavior:

    ReactiveFormsModule.withConfig({callSetDisabledState: 'whenDisabledForLegacyCode'})

    The other possibility being calling enable() on the FormControl when the value of isStudentIdReal changes.