Disabled property of FormControl components not working in Reactive Forms

[hetalishah]

Describe the bug The disabled property is not working in Reactive forms after upgrading to Angular 15. It works as expected in Angular 13.

To Reproduce Steps to reproduce the behavior:

disabled property in Angular 13 - working fine disabled property in Angular 15 - not working

Note: works as expected when used w/out formControlName binding, as well as outside formGroup.

Expected behavior The TextBox should be disabled in Angular 15 as well.

[hetalishah]

Workaround: Use the FormControl to set the disabled property to true.

StackBlitz example

[dimsis]

Hi, There is a problem with the resolution. When we disable using the {value:'', disabled: true} property on the FormControl, when the form is submitted, the form field and its value are not sent and this can cause a problem if there are backend validations.

[dimsis]

Update:

It seems it's an Angular 15 reactive form change for 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."

Another workaround if you want to pass the formControl and it's value is to use: title: this.form.getRawValue().title,

[dtopalov]

Seems applicable to all custom form controls - here is the example with added NumericTextBox and DropDownList:

https://stackblitz.com/edit/angular-qxy8en-tqembp?file=src%2Fapp%2Fapp.component.ts

[dtopalov]

Hi, There is a problem with the resolution. When we disable using the {value:'', disabled: true} property on the FormControl, when the form is submitted, the form field and its value are not sent and this can cause a problem if there are backend validations.

Not including the value of disabled inputs in the form value is standard HTML behavior, and one of the main differences between disabled and readonly https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly#attribute_interactions https://www.telerik.com/kendo-angular-ui/components/inputs/textbox/readonly-state/

Here is the updated example, using readonly instead of disabled:

https://stackblitz.com/edit/angular-qxy8en-ndsnr8?file=src%2Fapp%2Fapp.component.ts

[dimsis]

Another problem with setting disable via FormControl is that you lose the ability to disable based on conditions like this example that does the trick in the template:

kendo-textarea formControlName="comments" [maxlength]="400" [disabled]="selectedfundingType?.setting!=='MDT'" [placeholder]="(selectedfundingType?.setting==='MDT') ? '* specify: free text (400 characters)' : ''" [rows]="3" class="form-input comments-height">

[JohannesHoppe]

I compared the relevant parts of Kendo with an older version of 2019 and the latest version – the code regarding [disabled] wasn't touched at all. So this is not a Bug introduced by the Kendo Team!

But this is a well-known regression in Angular, which was introduced with the upgrade to Angular 15! See: https://github.com/angular/angular/issues/48350#issuecomment-1405900515

Solution:

// BEFORE
@NgModule({
  imports: [
    ReactiveFormsModule
  ]

// AFTER
@NgModule({
  imports: [
    ReactiveFormsModule.withConfig({ callSetDisabledState: 'whenDisabledForLegacyCode' })
  ],

After changing this setting, the Kendo Controls will behave like before.

Expected (old) behaviour: When the [disabled] binding is set to true, the underlying DOM element will be disabled and can't be changed anymore. BUT it will not behave like formControl.disable(). The value is still accessible via form.values. If the control is disabled via the dedicated function, then the value disappears! Please Kendo Team, never touch this behaviour – or our full codebase is screwed!

[yanmariomenev]

Our documentation is now updated to reflect the behavior changes in the disabled state of Reactive forms from Angular 15 and above. For example our DateInputs forms article:

https://www.telerik.com/kendo-angular-ui/components/dateinputs/dateinput/forms/#toc-managing-the-dateinput-disabled-state-in-reactive-forms