Dynamic mask feature failing for 2 different variations of input

[mattiLeBlanc]

🐞 bug report

Is this a regression?

No that I know of.

Description

I am trying to capture to TaxExempt numbers from the Netherlands, which can be either: NL 01234567 B01 (mask = SS 00000000 S00) NL 01234568 B01 (mask = SS 000000000 S00)

Using the dynamic mask feature (https://www.npmjs.com/package/ngx-mask#dynamic-valid-mask), I have this value in my Component:

taxExemptMask = 'SS 00000000 S00||SS 000000000 S00';

and this in my template:

<input matInput
      [mask]="taxExemptMask"
      formControlName="taxExemptNumber">

When typing:

You can see that when I want to type NL 012345678 B01 it tries to put the 8 in the B location.

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-ivy-msuvzc?file=src/app/form/form.component.html

🌍 Your Environment

Angular Version:

Angular CLI: 11.0.1
Node: 12.16.1
OS: darwin x64

Angular: 11.0.0
... animations, cdk, common, compiler, compiler-cli, core, forms
... material, platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.1
@angular-devkit/build-angular   0.1100.1
@angular-devkit/core            11.0.1
@angular-devkit/schematics      11.0.1
@angular/cli                    11.0.1
@angular/flex-layout            11.0.0-beta.33
@schematics/angular             11.0.1
@schematics/update              0.1100.1
rxjs                            6.6.3
typescript                      4.0.5

------- UPDATE ------- The only to get it to work for now is with a mask like:

taxExemptMask = 'SS 000000000 S00||SS 00000000 AAA'

I tried switching the masks around, first the 8 digit mask and then the 7 digit mask, so it would allow the longer on but when then confronted with a letter (B) after 8 digits, it would switch to the shorter format. Alas, that didn't work either. So my hack solution just makes the shorter format less strict so it can format the input after the user is done typing. Not ideal, because I could do NL 01234567 BBB now.

[chintan-ladani]

I am also facing that issue. anyone working on this issue.

[andriikamaldinov1]

@mattiLeBlanc Thanks for your using Ngx-Mask. In your case, you can use with an optional number and everything will work as expected. This is an example - https://stackblitz.com/edit/angular-c9xxzx?file=src%2Fmain.ts