Updating the mask in Angular breaks the form unmask="typed" integration

[dstj]

Hi,

I'm updating the [imask] from a radio button to switch the nested mask from "percentage" to "dollar". I'm using unmask="typed" with a twist to support nullable nested Number as in #432 with an Angular Form.

It's originally bound to "Fixed" and works no problem (i.e. input shows "$ 123" and the form value is 123 as expected) .

However, after updating the [imask], the value in the Angular form is no longer unmasked (i.e. "$ 123" is the form value instead of 123)

My input is created like so:

<input type="text" formControlName="amount" [imask]="iMaskCfg" unmask="typed">

...
  iMaskCfg = this.createCurrencyMask();

  private createCurrencyMask() {
    return new NullableMaskedNumberBlock({
      mask: `$ d`,
      lazy: false,
      blocks: {
        d: {
          mask: Number,
          thousandsSeparator: '',
          scale: 2,
          signed: true,
          radix: '.'
        }
      }
    });
  }

...

class NullableMaskedNumberBlock extends IMask.MaskedPattern {
  // @ts-ignore
  get typedValue() {
    const numericBlock = this.maskedBlock('d');
    return numericBlock.unmaskedValue !== ''
      ? // @ts-ignore
        numericBlock.typedValue
      : null;
  }
  set typedValue(num) {
    const numericBlock = this.maskedBlock('d');
    // @ts-ignore
    numericBlock.typedValue = num;
  }
}

I tried updating the mask using both:

• Rebinding the [imask] object
• imask.maskRef.updateOptions(...) (from toggle lazy:true/false on focus/blur using Angular plugin #380)

but same problem with both methods.

See repro on Stackblitz:

• Editor: https://stackblitz.com/edit/angular-ivy-if74lr?file=src/app/app.component.html
• Runner: https://angular-ivy-if74lr.stackblitz.io/

Possibly related to #359, I'm not sure.

Using imask v6.0.7 with both Angular 9 and 11

[uNmAnNeR]

actually imask works, but you have to pass { mask: YourMask } instead of just YourMask to updateOptions like this https://stackblitz.com/edit/angular-ivy-fmrkzv

[dstj]

@uNmAnNeR

Thanks. I'll do that!

Should Angular rebinding work in the same way as well?

Right now, this does not work:

<input #tb type="text" formControlName="amount" [imask]="iMaskCfg" unmask="typed">
...

iMaskCfg = this.createCurrencyMask();  // initial setup
...

if (type === 'Percentage') {
      this.iMaskCfg = this.createPctMask();
    }
    else {
      this.iMaskCfg = this.createCurrencyMask();
    }   

[uNmAnNeR]

@dstj same for cfg: this.iMaskCfg = { mask: this.createPctMask() };

[dstj]

@uNmAnNeR Thanks for letting me know.

I'm confused as to why that initial iMaskCfg = this.createCurrencyMask(); worked in the first place though... it should have been iMaskCfg = { mask: this.createCurrencyMask() }; I guess.

Thanks again.

[uNmAnNeR]

yeah, really confusing. I am thinking to get it work with masked instance directly.

[DywiTom]

How can i use NullableMaskedNumberBlock without creating an object manually for each input?