ngx-mask

ngx-mask copied to clipboard

Hi,

I am trying to create a payment form which has dynamic masks depending on card types. I am using the following code.

<input required formControlName="cardNumber" [mask]="cardNumberMask" matInput />

It works fine while switching between single masks like All : cardNumberMask = '0000-0000-0000-0000' Amex : cardNumberMask = '0000-0000-0000-000' Mastro 19 Digits : cardNumberMask = '0000-0000-0000-0000-000'

But when I use the || operator it starts messing up. All : cardNumberMask = '0000-0000-0000-0000' Amex : cardNumberMask = '0000-0000-0000-000' Mastro 19 Digits || 16 Digits : cardNumberMask = '0000-0000-0000-0000||0000-0000-0000-0000-000'

Expected : Validation should be updated as per selected mask. Actual : The validation with OR condition mask persist

Stackblitz example. Steps :

1. Enter 111... till the mask allows to add - Works as expected
2. Click change mask. Mask changes.
3. Enter 111... till the mask allows to add - Works as expected
4. Click change mask. Mask changes.
5. Enter 111... till the mask allows to add - Works as expected
6. Click change mask. Mask changes. (Mask 1 gets selected)
7. Enter 111... till the mask allows to add - Doesn't work as expected. Allows 19 digits where as mask is of 16 digits