Enabled property doesn't work more

[Ciprian-Catalin]

Hi,

i have updated from version 20.2.46 to new version 23.1.36 but seem that starting from this version property 

[enabled]="false" for ejs-datepicker or numerictextbox doesn't have any effect. Control remain enabled and i can change value from it. 

Have any idea about how to fix?

[Kokila Poovendran]

Hi Ciprian-Catalin,

Greetings from Syncfusion support!

We've reviewed your concern and prepared a sample using version 23.1.36. However, we were unable to replicate the issue on our end.

Here is a snippet of the code:

<div class="control-section">

  <div id="control_wrapper">

    <ejs-datepicker [enabled]="false"></ejs-datepicker>

  </div>

  <div>

    <ejs-numerictextbox value="10" [enabled]="false"></ejs-numerictextbox>

  </div>

</div>

 

 

We've also provided a runnable sample bellow. Kindly review it and verify if the issue persists. If you're still experiencing the problem, could you please modify the attached sample to reflect your specific scenario? This will help us provide a more tailored solution.

Thank you for your cooperation.

Sample: https://stackblitz.com/edit/angular-yvs1gq-dub5ql?file=src%2Fapp.component.html,package.json,src%2Fapp%2Fapp.module.ts,src%2Fapp.component.ts

Regards,

Kokila Poovendran.

[Ciprian-Catalin]

Hi,

Seem problem is when using reactive form. I have changed your sample for see if the datepicker is inside reactive form, attribute disabled doesn't work. I have added also a new method(disableDatePicker) for make disabled and is working from typescript.

This is the modified sample:

https://stackblitz.com/edit/angular-yvs1gq-rbu67o?file=src%2Fapp.component.html

I need an answer because is little bit urgent, i migrated app to Angular 16 and now the new version of packages affect this part for reactive forms. Thank you!

[Kokila Poovendran]

Hi Ciprian-Catalin,

Thank you for your patience. We understand your urgency, and we're here to help. Starting from Angular 15 and the latest updates, the 'enabled' property of the FormControl has been deprecated. The recommended approach is to use the 'enable()' or 'disable()' methods of the FormControl instance to manage its state.

We've prepared a code snippet and a sample for you to illustrate this change. Here's how you can update your code:

<ejs-datepicker

    id="dataDomandaId"

    locale="it"

    name="dataDomanda"

    formControlName="dataDomanda"

    cssClass="e-outline e-small"

    format="dd/MM/yyyy"

    placeholder="Data Domanda"

    floatLabelType="Auto"

  >

    {{ reactiveForm.get('dataDomanda').disable() }}

  </ejs-datepicker>

You can also refer to this GitHub issue for more information on the deprecation: https://github.com/angular/angular/issues/48350

To see the updated sample, please visit this link: https://stackblitz.com/edit/angular-yvs1gq-ovnnt2?file=src%2Fapp.component.html,src%2Fapp.component.ts

If you have any more questions or need further assistance, please don't hesitate to ask. We're here to support you.

Regards,

Kokila Poovendran.