[attr.disabled]=true not working in Reactive Form Angular 15

Question

Currently I'm using Angular 15 and in Angular 14 for the disabled input field in reactive form I used [attr.disabled]="disableField ? true : null".

This attribute after I update the Angular version 14 to 15 it's not working

Elisabetta

I tried [disabled]="condition" attribute but its not working I found another solution is formControlName.disable() but I want to put condition in html code – Elisabetta

use a directive to "disabled", see e.g. SO – Overmaster

Answer 1

It's a change in Angular 15 that changes the disabled state.

This behavior change was caused by a fix to make setDisabledState always called. Previously, using [attr.disabled] caused your view to be out of sync with your model.

If you are using Reactive Forms? Try setting disabled on your model, not your template. Try new FormControl({ value: 'foo', disabled: true }). Or call myControl.disable() in ngOnInit. If you want to opt-out of the fix. Make sure you're on 15.1.0 or later and import FormsModule.withConfig({ callSetDisabledState: 'whenDisabledForLegacyCode' }) (or ReactiveFormsModule, if that's what you're using).

Wildon

I have added 2 control with same formControlName as per the requirement and based on condition only one is visible at a time so I need to disabled condition in template – Elisabetta

Answer 2

Please update your ReactiveFormsModule import statement in your module file with below statement:

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

Uncharted