Toggling hiddenInput on/off display incorrect value.

[Raze05]

Hello,

I'm currently using ngx-mask to handle ssn input in the format of XXX-XX-0000 and use hiddenInput to hide the first 5 number on the UI. One of our requirement was to have the ability to display the ssn in full or secure as will. This was done by having [hiddenInput] being driven by a checkbox value. Everything is good except when the hiddenInput is switch when the user had only entered 4 or 6 digits.

So entering 1234 ( *** - * ) then switch hiddenInput off will display 124 instead of 123-4, enter 123456 ( *** - ** - * ) then switch will display 123-46 instead 123-45-6. Likewise if hiddenInput is off by default, entering 1234 (123-4) then switch hiddenInput on will display *** instead of *** - * . It look like if the user had only enter the ssn up to one digit after the - and then switch the issue will occur.

<mat-form-field floatLabel="never">
                <mat-label>000-00-0000</mat-label>
                <input #ssnInput matInput mask="XXX-XX-0000" [hiddenInput]="!showSSN.value" formControlName="ssn" autocomplete="off">
</mat-form-field>

[scrimothy]

I have a similar issue:

Issue
If I set hiddenInput to false, value changes have unexpected results.

Situation
I am enforcing 2 decimal points after a user blurs out of a masked field by setting the value to value.toFixed(2). We also use the hiddenInput in some cases with the same component, so we have a boolean hiddenInput that toggles from true to false. If the value of that input is false (and not undefined), the value in the field is still processed through your ternary statement in applyMask().

Possible Solution
I see on line 51 of mask.service.ts that the if condition is set to if (this.hiddenInput !== undefined) which would of course mean that false or even null values for hiddenInput would still get processed. If, instead, you changed the condition to if (this.hiddenInput), then it would not process for any falsy value.

Example
Please see my Stackblitz for an example of what's happening. Thanks!

[NepipenkoIgor]

@scrimothy @scrimothy Thank you. Please try newest version.

[rushabh-wadkar]

Hey @NepipenkoIgor
We're using ngx-mask@12 version as we are using angular version set to v12. It's not possible for us to upgrade the angular version due to the timelines. Is it possible to fix this issue for version 12 of ngx-mask as a patch version ?

Reproducible link: https://stackblitz.com/edit/test-ngx-mask-6j2szn?file=src%2Fapp%2Fapp.component.html&hideDevTools=1

Step1: Write: 111-1
Step2: Click hide button

This shows *** instead of **-

[rushabh-wadkar]

@NepipenkoIgor @andriikamaldinov1 Any plans to fix this for v12 ?
Can you atleast provide what changes are needed just to fix this. I have already forked the project. I'll patch this on my own.

[andriikamaldinov1]

@rushabh-wadkar Thanks for using Ngx-mask. We have added updated version for 12 angular this is 13.2.1
It example all work as expected - https://stackblitz.com/edit/base-angular-12-app-hqsdro?file=src%2Fapp%2Fapp.module.ts,src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts