Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Invalid time input from keyboard to form with timepicker causes an error 'Cannot read property 'replace' of null' #349

Open
melnikovee opened this issue Jun 23, 2020 · 8 comments · May be fixed by #371
Labels
in progress started implementation

Comments

@melnikovee
Copy link

I have a form with added ngx-material-timepicker.
Also have a method in .component.ts, that parses invalid time input from keyboard. For example '12' will be edited to legal '12:00'.

It worked until version 5.3.0 inclusive. But in later versions the wrong keyboard time entry causes an error 'Cannot read property 'replace' of null'.

Screenshot_200

@slaviki
Copy link

slaviki commented Jul 1, 2020

I have the same issue.
If you enter time in wrong format the error pops up:

ERROR TypeError: Cannot read property 'replace' of null
at Function.formatTime (ngx-material-timepicker.js:475)
at TimepickerDirective.set value [as value] (ngx-material-timepicker.js:1102)
at TimepickerDirective.updateValue (ngx-material-timepicker.js:1124)
at TimepickerDirective_change_HostBindingHandler (ngx-material-timepicker.js:1178)
at executeListenerWithErrorHandling (core.js:21708)
at wrapListenerIn_markDirtyAndPreventDefault (core.js:21750)
at HTMLInputElement. (platform-browser.js:934)
at ZoneDelegate.invokeTask (zone-evergreen.js:400)
at Object.onInvokeTask (core.js:41255)
at ZoneDelegate.invokeTask (zone-evergreen.js:399)

@cristianeph
Copy link

yeah I have the same error? any workaround?

@Agranom
Copy link
Owner

Agranom commented Jul 10, 2020

I guess it happens when you pass time with wrong format. Try to use the proper format

@Aidan-Chey
Copy link

I recently had to solve this error popping up. We have two separate application that can edit the data in the same database, one was free type text for the column in the table, the one throwing the error was a time picker field. So the issue that something like 'test' was being used as a value for a time field.

Wasn't really a fix but a work around... changed the time field to match the other application data entry method.

@bdshanto
Copy link

bdshanto commented Oct 6, 2020

I want to update data, and got this error

@herrkoch
Copy link

herrkoch commented Oct 15, 2020

We are using ngx-material-timepicker inside a mat-form-field with an editable input field, so the user can either use the timepicker or enter the time via keyboard, and it seems as a consequence of this error the form validation is not triggered, so there is no red underlining, which would be very helpful to the user though to see that he/she entered an invalid time:
image

EDIT: I tried to intercept the change event to ngx-material-timepicker to avoid the error but without success, it seems it has to be fixed inside the library. Another workaround might be to trigger the form validation myself explicitly somehow but it also will be a hack.

@herrkoch herrkoch linked a pull request Oct 16, 2020 that will close this issue
@herrkoch
Copy link

While my suggested PR fixes the issue, I am using following workaround for now that might be interesting to other folks as well:

<mat-form-field [class.mat-form-field-invalid]="!isValidInput()">

whereas isValidInput() basically executes the pattern on the entered input value that would otherwise be validated with <input pattern="^([01]?[0-9]|2[0-3]):[0-5][0-9]$"> (for the 24h clock in this case) and checks additionally if the input field was touched by the user.

@wiedikerli
Copy link

@Agranom could this issue be resolved by merging the PR from @herrkoch? I'm also facing this issue and i dont want to use a workaround.

wiedikerli added a commit to OPTEN/ngx-material-timepicker that referenced this issue Mar 12, 2021
Agranom added a commit to herrkoch/ngx-material-timepicker that referenced this issue Jun 15, 2023
@Agranom Agranom added the in progress started implementation label Jun 20, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
in progress started implementation
Projects
None yet
Development

Successfully merging a pull request may close this issue.

8 participants