Timepicker + Reactive Forms Disabled field + mouseWheel

[llutti]

Bug description or feature request:

I have a reactive form linked to a timepicker. The problem occours when I disabled the field and timepicker are blocked (this work perfect). But if a position the mouse over the timerpicker field and use de mousewheel the value change only at the first time. To solved this issue I use the ReadonlyInput property too, then all works fine.

Plunker/StackBlitz that reproduces the issue:

I see this problem occurs:

• Open the demo page https://valor-software.com/ngx-bootstrap/#/timepicker#form
• Click in "Disable Control"
• Position the mouse over the minutes input and use the mouse wheel

Versions of ngx-bootstrap, Angular, and Bootstrap:

ngx-bootstrap: 3.3.0

Angular: 7.2.9

Bootstrap: 4.3.1

[ludmilanesvitiy]

@llutti Hi! Could you describe more detailed, what behavior do you expect?

[llutti]

Hi!

The problem is that even disabled field allows change using the mouse wheel.

To reproduce the problem follow these steps:

1 - Open the demo page https://valor-software.com/ngx-bootstrap/#/timepicker#form

2 - Click the "Disable Control"

3 - Click in the field of the minutes and use the mouse wheel

4 - You will see that the minutes value has been changed, even if the field is off

[ludmilanesvitiy]

@llutti Ok, now I see, thanks.

[harikasin]

@llutti Hi! We have the same problem. I'm disabled and enabled the component with a reactive form. When I disabled the timepicker component and then I move the mouse wheel and after that, I enabled again but it doesn't work anymore, for instance, it doesn't respond to mousewheel change or arrow buttons' clicks.

The temporal solution that we are doing is to set the property [mousewheel] to true or false like in the following code:

<timepicker formControlName="horaInicio" [mousewheel]="formulario.get('check').value==='hora'></timepicker>

this.formulario.get('horaInicio').enable(); or disable();

When the check the value is 'hora', we enable the time picker through reactiveforms and the mousewheel with the property.

[llutti]

@harikasin Hi!

In my case, I added [readonlyInput]="!this.formulario.get('horIni').enabled" in the timepicker.