🐞 bug report

Is this a regression?

Not tested prior to v12

Description

When a field is set to use a dynamic mask, and then the mask is changed to a non-dynamic one, the field continues to use the original mask.

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-ivy-f3wkka

If you switch the country to Canada, the US mask will continue to be used. If the US mask was changed to one that is not dynamic, such as 00000, then you can see that switching between masks works as expected.

🌍 Your Environment

Angular Version:

Angular CLI: 11.0.6
Node: 14.15.4
OS: win32 x64

Angular: 11.0.7
... animations, common, compiler, compiler-cli, core, forms     
... localize, platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------       
@angular-devkit/architect       0.1100.6
@angular-devkit/build-angular   0.1100.6
@angular-devkit/core            11.0.6
@angular-devkit/schematics      11.0.6
@angular/cdk                    11.0.3
@angular/cli                    11.0.6
@angular/material               11.0.3
@angular/service-worker         11.0.9
@schematics/angular             11.0.6
@schematics/update              0.1100.6
rxjs                            6.6.3
typescript                      4.0.5

Anything else relevant?

This behavior was exhibited on Firefox 92 and Chrome 94

Workarounds I Found:

• It seems to work if both masks are dynamic, even if the Canadian mask was S0S 0S0||
• If you can re-render the field somehow, the correct mask will be used. For example, I made it conditional on the mask, set the mask to null when the country changes, and then set the correct mask in a setTimeout.

@quangdaon Thanks for your using Ngx-Mask. Please update to latest version. It example, all work as expected - https://stackblitz.com/edit/angular-spo96q?file=src%2Fmain.ts