iMask plugin for Angular: the unmask property doesn't allow typed

Question

I'm using the iMask plugin for Angular, and when I set the value of the unmask attribute to 'typed', I'm encountering an error that doesn't occur when I use 'true' or 'false' as the value.

This is the input:

 <input
  type="text"
  class="form-control"
  placeholder="Price"
  [(ngModel)]="book.price"
  id="book"
  name="book"
  #bookInput="ngModel"
  [imask]="currencyMask"
  [unmask]="'typed'"
  (ngModelChange)="onChange($event)"
/>

The Error:

ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of null (reading 'toLocaleString')
TypeError: Cannot read properties of null (reading 'toLocaleString')
    at MaskedNumber.format (number.js:301:18)
    at MaskedNumber.typedValueEquals (base.js:377:127)
    at MaskedNumber.typedValueEquals (number.js:285:19)
    at set typedValue [as typedValue] (input.js:90:21)
    at set maskValue [as maskValue] (angular-imask.mjs:59:40)
    at IMaskDirective.writeValue (angular-imask.mjs:114:27)
    at setUpControl (forms.mjs:2938:23)
    at forms.mjs:3376:13
    at _ZoneDelegate.invoke (zone.js:368:26)
    at Object.onInvoke (core.mjs:26249:33)
    at resolvePromise (zone.js:1193:31)
    at zone.js:1264:17
    at _ZoneDelegate.invokeTask (zone.js:402:31)
    at core.mjs:25935:55
    at AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:25935:36)
    at _ZoneDelegate.invokeTask (zone.js:401:60)
    at Object.onInvokeTask (core.mjs:26236:33)
    at _ZoneDelegate.invokeTask (zone.js:401:60)
    at Zone.runTask (zone.js:173:47)
    at drainMicroTaskQueue (zone.js:581:35)

In the component I have the properties of currencyMask and book:

currencyMask={
  mask: Number,
  scale: 2,
  thousandsSeparator: ',',
  padFractionalZeros: true,
  normalizeZeros: true,
  radix: '.',
  mapToRadix: ['.'],
  min:0,
};
book: CreateBook = new CreateBook();

And CreateBook is:

class CreateBook {
    title:string="";
    price:number=0;
}

When the user inputs the price, i'm expecting to get the value of price as a number, not a string. If I use [unmask]="true" the value is being saved as a string. I'm using Angular 16.

I think this can be caused because price type is number and not Number but I already change the type and didn't works, I got the same error.

Answer 1

I had a similar case and it helped to define a custom format function

format: (x: string) => (x === "" ? null : x + "")