[Datetimepicker] Cannot read properties of undefined (reading 'type')
The datetimepicker throws an error after updating to 19.0.1, but only when I programmatically set its value with writeValue. This did not throw when I was on version 18.4.0.
ERROR TypeError: Cannot read properties of undefined (reading 'type')
at _MtxDatetimepickerInput.getDisplayFormat (mtxDatetimepicker.mjs:4490:34)
at _MtxDatetimepickerInput._formatValue (mtxDatetimepicker.mjs:4529:89)
at set value (mtxDatetimepicker.mjs:4370:10)
at _MtxDatetimepickerInput.writeValue (mtxDatetimepicker.mjs:4443:10)
at Object.next (form-field.ts:46:21)
at ConsumerObserver2.next (Subscriber.js:90:25)
at Subscriber2._next (Subscriber.js:59:22)
at Subscriber2.next (Subscriber.js:32:12)
at Subject.js:41:22
at errorContext (errorContext.js:23:5)
I made a minimal repro here: https://stackblitz.com/edit/stackblitz-starters-5yuruzkt?file=src%2Fmain.ts (check the console for the error).
I test extensions v18 in Angular v19, it still has the same issue, maybe the effect() has some changes.
https://stackblitz.com/edit/stackblitz-starters-mxo8qdem?file=src%2Fmain.ts,package.json
The datetimepicker is undefined when you invoke writeValue, I don't know how to fix it. Another way you can use setTimeout.
https://github.com/ng-matero/extensions/blob/52b50da8d0bf318ab49148d30161683826b8bb82/projects/extensions/datetimepicker/datetimepicker-input.ts#L320
I made a workaround for it, but it is a bit hacky:
valueAccessor = viewChild.required(MtxDatetimepickerInput);
datepickerPopup = viewChild.required(MtxDatetimepicker);
constructor() {
effect(() => {
const valueAccessor = this.valueAccessor();
const datepickerPopup = this.datepickerPopup();
// Manually set the `_datetimepicker` so the `getDisplayFormat` function runs properly.
// Do not use the `mtxDatetimepicker` input because it will throw an error when the input is set from the HTML too.
valueAccessor._datetimepicker ??= datepickerPopup;
untracked(() => {
if (valueAccessor) {
valueAccessor.writeValue(new Date());
}
});
});
}
https://stackblitz.com/edit/stackblitz-starters-vfjkxuvs?file=src%2Fmain.ts