Cannot support NullableMaskedNumber since 6.5.0: "Cannot read properties of undefined (reading 'toLocaleString')"
Describe the bug Since 6.5.0 (still in 7.6.1), we can not longer support nullable masked number like shown here.
The following JavaScript error is thrown in the format method a null value is passed to it.
global-error-handler.ts:89 TypeError: Cannot read properties of undefined (reading 'toLocaleString')
at NullableMaskedNumber.format (number.js:333:18)
at NullableMaskedNumber.doFormat (base.js:317:31)
at NullableMaskedNumber.typedValueEquals (base.js:370:112)
at NullableMaskedNumber.typedValueEquals (number.js:320:19)
at set typedValue (input.js:112:21)
at set maskValue (angular-imask.mjs:59:40)
at IMaskDirective.writeValue (angular-imask.mjs:114:27)
at onChange (forms.mjs:3111:27)
at forms.mjs:3586:50
at Array.forEach (<anonymous>)
To Reproduce See StackBlitz repro with 7.6.1
Expected behavior In many cases, a null value is a valid value, it is often used for data validation for required value too. It should be natively supported by the library.
Environment:
- OS: Windows 11 Pro
- Browser: Chrome
- Version: 129.0.6668.71 (Official Build) (64-bit)
- IMask version: 7.6.1 (since 6.5.0)
- Framework/plugin version if used: Angular
Additional context
I managed to sort of fix it by overriding the format method, but this is very hacky.
IMask.MaskedNumber.DEFAULTS = {
...IMask.MaskedNumber.DEFAULTS,
format: n => {
return n?.toLocaleString('en-US', {
useGrouping: false,
maximumFractionDigits: 20
}) || '';
}
};
The workaround of overriding the format method does indeed work, but there's another issue: When the control's value is 0 and you try to patch it to null, the input will still display 0 while the control's value will be correctly updated to null.