Igniteui-angular: igx-timepicker model is not cleared when value in the input is cleared

[sjPrajwal]

timepicker works with angular form?

need to integrate the dropdown time picker with angular forms and do validation with reactive form validation.

Describe the solution you'd like

time picker can integrate to a angular with template reference variable, instead of component directive.

[Lipata]

Hi, @sjPrajwal.

Did you had the chance to check the already existing igxTimePicker?

[sjPrajwal]

Hi Nikolay,

i am using your time picker in my application, integrated the time picker
with angular reactive form validation.
Problem is if clear the value in time picker, ngmodel value is still
showing the todays date and time.

On Mon, Feb 3, 2020 at 4:20 PM Nikolay Alipiev [e-mail]
wrote:

Hi, @sjPrajwal https://github.com/sjPrajwal.

Did you had the chance to check the already existing igxTimePicker
https://www.infragistics.com/products/ignite-ui-angular/angular/components/time_picker.html
?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/IgniteUI/igniteui-angular/issues/6585?email_source=notifications&email_token=AICLLK23H35YTK4C7D5C5VTRA7ZGBA5CNFSM4KPBR2AKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEKTLZCI#issuecomment-581352585,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AICLLKYQPBDJ3CLOWZKHAY3RA7ZGBANCNFSM4KPBR2AA
.

[sjPrajwal]

Hi @Lipata ,

You got the problem am facing..??
Please suggest any solution..

[zdrawku]

For proper ngModel binding in a form a name attribute needs to be specified for the input you're using or provide [ngModelOptions]={standalone: true}

[sjPrajwal]

Hi @Lipata,

[(ngModel)]="enquiry.endTime">

this is how i am using in application, once the value set, again if i need to clear the by editing feild or by using X mark, ngModel still show the Mon Feb 03 2020 00:00:00 GMT+0530 (India Standard Time) time.

[zdrawku]

Change your code to:

[(ngModel)]="enquiry.endTime">

You can use this sample as a reference

[sjPrajwal]

Hi IgniteUI/igniteui-angular team,

for date picker its working perfectly, but not with time picker. please see
the below link.

https://stackblitz.com/edit/angular-v7yofg?file=src/app/timepicker-sample-8/timepicker-sample-8.component.html

On Mon, Feb 3, 2020 at 7:06 PM Zdravko Kolev [e-mail]
wrote:

Change your code to:

[maxValue]="max" mode="dropdown" *name="test"*
[(ngModel)]="enquiry.endTime">

You can use this sample
https://stackblitz.com/edit/angular-ngmodel-form-datepicker?file=src%2Fapp%2Fscheduling%2Fdatepicker%2Fdatepicker-dropdown%2Fdatepicker-dropdown.component.html
as a reference

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/IgniteUI/igniteui-angular/issues/6585?email_source=notifications&email_token=AICLLKYRKFKD7G67CHCAJVLRBAMT7A5CNFSM4KPBR2AKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEKT3MKA#issuecomment-581416488,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AICLLKYEUSVBYJLGSZNWPYLRBAMT7ANCNFSM4KPBR2AA
.

[sjPrajwal]

difference in date-picker and time-picker with ng-model.
working with date-picker and not working with time-picker.

https://stackblitz.com/edit/angular-ngmodel-form-datepicker-ipevrj?file=src/app/scheduling/datepicker/datepicker-dropdown/datepicker-dropdown.component.html

On Tue, Feb 4, 2020 at 1:08 PM prajwaljayaram praju <
[email protected]> wrote:

Hi IgniteUI/igniteui-angular team,

for date picker its working perfectly, but not with time picker. please
see the below link.

https://stackblitz.com/edit/angular-v7yofg?file=src/app/timepicker-sample-8/timepicker-sample-8.component.html

On Mon, Feb 3, 2020 at 7:06 PM Zdravko Kolev [e-mail]
wrote:

Change your code to:

[minValue]="min" [maxValue]="max" mode="dropdown" *name="test"*
[(ngModel)]="enquiry.endTime">

You can use this sample
https://stackblitz.com/edit/angular-ngmodel-form-datepicker?file=src%2Fapp%2Fscheduling%2Fdatepicker%2Fdatepicker-dropdown%2Fdatepicker-dropdown.component.html
as a reference

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/IgniteUI/igniteui-angular/issues/6585?email_source=notifications&email_token=AICLLKYRKFKD7G67CHCAJVLRBAMT7A5CNFSM4KPBR2AKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEKT3MKA#issuecomment-581416488,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AICLLKYEUSVBYJLGSZNWPYLRBAMT7ANCNFSM4KPBR2AA
.

[sjPrajwal]

Hi @Lipata,

Any updates regarding this feature??

[wnvko]

@sjPrajwal to bind input to ngModel the input should have either name attribute set or [ngModelOptions]="{standalone: true}. Both ways this is working in your last sample.

[sjPrajwal]

Hi @wnvko,

i think you didn't get the question i asked, from time-picker value is binding to the ng-model, but its not clearing.
Means:
1). if you try to clear values in input field of picker editing that, only from picker its clearing not from ng-model, still ng-model holding same values or 00:00 value.
2). if try to clear values using X mark in picker, still observing same behavior as above.

Instead for assigning this to feature-request we can tell its a bug in time-picker.
for date picker its working perfectly fine, please test both date-picker and time-picker of below sample.
https://stackblitz.com/edit/angular-ngmodel-form-datepicker-rsqpsl?file=src/app/scheduling/datepicker/datepicker-dropdown/datepicker-dropdown.component.html

i was not able attached the screen shots, otherwise i would have attached the screen shots for better understanding.

Thanks.
Waiting for your reply.

[Lipata]

@sjPrajwal, you are correct this is a bug in the time-picker

[sjPrajwal]

Hi @Lipata,

When can i expect fix for this bug ?

[Lipata]

@sjPrajwal, we can start working on this bug, as early as next week.

[sjPrajwal]

@Lipata,
Good morning.
Any updates on the issue.?

[Lipata]

Hi, @sjPrajwal. Still not started working on it. I will keep you updated when we have the time to work on this issue.

[sjPrajwal]

Okay @Lipata,

Thanks.

[github-actions[bot]]

There has been no recent activity and this issue has been marked inactive.

[PlamenaMiteva]

Hi @sjPrajwal,

Since the time picker component is designed to work with the date picker, the clear() method does not set its value to null, it sets the hours and minutes to zero instead. However we are planning to refactor both time and date picker components very soon and I have already linked this issue to the time picker refactoring issue.
Meanwhile, a possible workaround would be to handle the valueChange event and set the value to null if it has been cleared as in the following sample