Angular Number Mask Issue

[ryanbuening]

On a previous version of angular-imask (specifically angular-imask@1.0.2 with imask@3.1.1 on Angular 5.2.5 - sample project here I was able to use the following mask:

<input [imask]="this.maskService.numericWithThousandsSeparator(999999)" [(ngModel)]="thousandsMask" name="thousandsMask"/>

    public numericWithThousandsSeparator(max: number): {} {
        return {
            mask: Number,
            scale: 0,
            signed: false,
            thousandsSeparator: ",",
            padFractionalZeros: false,
            normalizeZeros: false,
            max: max,
            min: 0,
        };
    };

The mask would allow me to type in any number from 0 to 999,999.

When I try to use this same number mask above with angular-imask@4.1.1 with imask@4.1.1 on Angular 7.0.2 (sample project here). The mask won't allow me to type anything and I don't get any messages in the console.

Any ideas of why this is happening or what I'm doing wrong?

Additional Info: I've verified the mask also works with angular-imask@3.4.0 with imask@3.4.0 on Angular 7.0.4. I then did an npm uninstall angular-imask and ran a npm install angular-imask which installed version 4.1.1 of both angular-imask and imask. This reproduced the issue of the mask not allowing me to enter anything into the input. So my guess is something between versions 3.4.0 and 4.1.1 was introduced that caused this.

[uNmAnNeR]

thanks! i'll check

[ryanbuening]

Thanks @uNmAnNeR. Do you know how I can install angular-imask@3.4.0 and have it install imask@3.4.0 as its dependency? I'm running into a scenario where npm install angular-imask@3.4.0 is installing imask@4.1.1 which is causing the issue I described above. I'm trying to revert back to 3.4.0 for both angular-imask and imask.

[uNmAnNeR]

Do you know how I can install angular-imask@3.4.0 and have it install imask@3.4.0 as its dependency?

Before v4.0.0 plugins have latest imask dependency imask: latest. I thought that i update core but plugins should not be updated. Now i realize that was a bad idea and since v4.0.0 plugins linked with fixed imask version.

I investigated that if mask options is generated dynamicaly then Angular updates mask options on input but before imask handles input. And on update options new input value gets overrided by old one so input is not processed by imask.
Hot fix is to get rid of mask getters or methods that returns mask. Use mask property and update it on demand. E.g. (pseudocode):

class MyComponent extends Component {
  maskOptions = {mask: Number};
  onMaxChanged (max) {
     this.maskOptions.max = max;
  }
}

But i still believe i can fix it soon.

[ryanbuening]

@uNmAnNeR thanks for clarification on the versioning issue. If you think you can fix the underlying issue I will wait as I have this logic (where I return a mask) in many places. Thanks again.

[ryanbuening]

Hey @uNmAnNeR - just wondering if there is anything I can help with on this or anything further you would like me to investigate for you? Thanks.

[uNmAnNeR]

@ryanbuening Sorry about delay. Reeealy have no time.
I suppose this can fix #128
Can you please check it? This fix should not break #74
It would be a great help.

[ryanbuening]

@uNmAnNeR - I ran a build from #128 and it does appear to fix this issue.

However, I'm not sure if it broke #74 or if I'm doing something wrong setting up the test.

1. The mask loads correctly and the germany mask is applied.
2. I click the change button and the mask is cleared, but I get an error in the console: Error in event handler for (unknown): TypeError: Cannot read property 'options' of undefined.
3. I type in the field and the usa mask is applied correctly.
4. I click the change button again and get the same error as above.
5. I can no longer type in the field.

[uNmAnNeR]

@ryanbuening Thank you!
that was a bug with dynamic mask :) Fixed.
Can i merge it?

[ryanbuening]

If you think that is fixed then yes. Thanks!

[uNmAnNeR]

@ryanbuening done! check it 👍

[ryanbuening]

@uNmAnNeR I updated to 4.1.3 and this appears to be fixed. Thanks!