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

[melnikovee]

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'.

[slaviki]

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]

yeah I have the same error? any workaround?

[Agranom]

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

[Aidan-Chey]

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]

I want to update data, and got this error

[herrkoch]

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:

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]

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]

@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.