search

JsDaddy / ngx-mask

Angular Plugin to make masks on form fields and html elements.
https://jsdaddy.github.io/ngx-mask
MIT License
1.15k stars 298 forks source link

Issue with updating ngModel value of Angular input and mask #1342

Closed Dastardl closed 2 months ago

Dastardl commented 6 months ago

🐞 bug report

Is this a regression?

No idea, this came up while trying to update our dependency on cleave.js for a mask for a date field. Tested versions are 17.0.6 and 17.0.7 (latest at time of writing).

Description

There is some weird behavior going on when an input field is bound using ngModel and the underlying model is updated in code.

🔬 Minimal Reproduction

Stackblitz

  1. Type any valid date in the input field (ex. 01/01/1999)
  2. The model is updated to this new value - output in console while typing is as expected.
  3. Click the 'update model' button. This will set the myValue variable to 01/01/2000. The underlying variable is modified as seen next to the 'The model: ' text, but the displayed value in the textbox is not. Neither is the ngModelChanged method called.

-> If the value of the textbox is empty and the button is clicked, both the model and the displayed text in the input are correct. -> If you typed anything in the textbox before emptying it and clicking the button the behavior is as described above where the input displays the old value.

🔥 Exception or Error

None

🌍 Your Environment

Angular Version:

Exactly as in the stackblitz example. Angular 17, ngx-mask 17.0.6 and 17.0.7 (both have this issue).

andriikamaldinov1 commented 2 months ago

@Dastardl Thanks for using Ngx-mask. Please update to latest version. It example all work as expected - https://stackblitz.com/edit/angular-17-starter-project-wd5yv7?devToolsHeight=33&file=src%2Fmain.ts