Library not working with angular 18

[jvermeer-ssi]

🐞 bug report

Description

library is not working with angular 18 when using [(ngModel)] or [formControl].

• can't enter >4 digits
• backspace removes multiple characters

🔬 Minimal Reproduction

https://stackblitz.com/edit/stackblitz-starters-q6b56r?file=src%2Fapp%2Fapp.component.html

🌍 Your Environment

Angular CLI: 18.0.2
Node: 20.11.0
Package Manager: npm 10.2.4
OS: win32 x64

Angular: 18.0.1
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, material, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1800.2
@angular-devkit/build-angular   18.0.2
@angular-devkit/core            18.0.2
@angular-devkit/schematics      18.0.2
@angular/build                  18.0.2
@angular/cli                    18.0.2
@schematics/angular             18.0.2
rxjs                            6.6.7
typescript                      5.4.5
zone.js                         0.14.3

[Cjameek]

Experiencing the same issue with all of my inputs using NgxMaskDirective. I cannot type more than 4 characters before the input begins messing up. Not sure what has changed in Angular 18 that would result in this issue.

[allenkepler-finastra]

I don't think this is an angular 18 issue. I think this is an issue with ngxmask 17.0.5 or higher. I downgraded ngxmask in your stackblitz to 17.0.4 and it works. I'm experiencing the same problem in Angular 17 with 17.0.5 - 17.0.8. My issue presents a little different because I'm using seperator.2, but I think its the same source issue. Issue also goes away if you change the thousandSeparator to a period.

Working with 17.0.4 https://stackblitz.com/edit/stackblitz-starters-fvfbnu?file=src%2Fapp%2Fapp.component.html

Thanks!

[drmencos]

You can also fix it by setting "decimalMarker":

provideNgxMask({ thousandSeparator: ',', decimalMarker: '.' })

[rodrigomacaubas]

I did the tests with node 20.9.0 and also had problems... so, if you use Angular Material in the project, you also have problems with number formatting

[andriikamaldinov1]

@jvermeer-ssi @Cjameek @allenkepler-finastra Thanks for using Ngx-mask. Please update to latest version. It example all work as expected - https://stackblitz.com/edit/stackblitz-starters-ku5mbw?file=package.json,src%2Fapp%2Fapp.component.ts