Kendo-angular: Cannot enable DatePicker after disabling (reactive forms)

[Dastardl]

I'm submitting a...

• Regression report

Current behavior

When a datepicker field is used in a reactive form and disabled through code, it is no longer possible to enable that datepicker.

Expected behavior

Calling .enable() on the FormControl should enable the input again.

Minimal reproduction of the problem with instructions

I have provided a small plunkr based on the reactive forms example on the webiste.

Initially the input field will work as expected. You then click the disable button which disables any interaction (as expected). Afterwards you click the enable button which should enable the input again. Unfortunately this is not the case and it stays disabled.

Environment

Is reproducible on demo site.

Browser:

• Chrome (desktop) version 61.0.3163.79
• IE version 11 (11.726.15063.0)

[ggkrustev]

@Dastardl, thanks for the report. We've fixed a similar issue before, but it seems that there are still cases where the component still don't enable.
We will further investigate the case and will update the thread once there is a fix available.

[rstabenow]

I have the same problem and came up with a workaround.
I set the disabled attribute of kendo-datepicker to the disabled property of the FormControl.

That is kind of redundant and generates warnings in the js console, but solves the problem for the user.

[zhaparoff]

I've faced the same issue with:

• angular 5.2.0
• kendo-angular-dateinputs 1.4.3
• Chrome 63.0.3239.132.

@rstabenow,
Your workaround could produce other issues with form validation and submit, since _disabled_ attribute contains no logic for reactive form controls, except this warning.
@Input('disabled') set isDisabled(isDisabled: boolean) { ReactiveErrors.disabledAttrWarning(); }
https://github.com/angular/angular/blob/04dd9713f090ae7a9710b08b6a23b3619112fb3d/packages/forms/src/directives/reactive_directives/form_control_name.ts#L92-L93

So, although control will be disabled in UI, it will remain a subject for validation, change tracking and other hooks, until you will call FormControl.disable() method.

[rstabenow]

@zhaparoff
I already call FormControl.disable() and FormControl.enable() and form validation works fine.
But the internal DateTimePickerComponent.disabled variable is not set and because of that, the user can not input a value after enabling the FormControl.

The DateTimePickerComponent has its own disabled input property which is called by binding to the FomControl.disabled property to the disabled attribute.
The input property of FormControlName is also called and produces the warning, but I don't want it to do anything, the FormControl is already in the correct state.

[zhaparoff]

@rstabenow,
Thanks for clarification, now got it. I've tested this approach within my project, and could confirm it's working pretty fine. But these console warnings are a bit annoying...

Also, as for other controls (for example _numerictextbox_), using just _.disable()/.enable()_ methods works without issues. Can't say for sure about all of them, since I'm using mostly numerics, dates and simple inputs.

[joerglang]

Have the same issue

I found the following workaround

     enableForm() {
       this.myForm.enable();
       this.myForm.controls['birthDate'].reset(this.myForm.controls['birthDate'].value);
     }

I use the reset method of the control to set it to it's current value. This somehow also removes the unneeded required attribute of the control that should have been removed by myForm.enable() before.

[zhaparoff]

@ggkrustev
Would you provide any update on this? Milestone or estimates?
Although workarounds, mentioned in this thread, allow to fix component behaviour, but also they lead to a lot of meaningless calculations, producing noticeable performance penalty, particularly in IE 11.

[ggkrustev]

@zhaparoff
Actually a fix was released a couple days ago. The latest DEV package, v2.1.0-dev.201802061406, includes the fix. Would it be possible to give it a try?

[MikeJonesNC]

@joerglang This works for me too, thank you for figuring that out!

[zhaparoff]

@ggkrustev
Seems it is working fine, without workarounds. Thanks!
Do you have an idea when the fix will be merged into the stable branch?

[tsvetomir]

Fix released in @progress/kendo-angular-dateinputs v2.1.0