Ngx-mask: mask modifies the behavior of ngModelChange

[samherrmann]

Description

Consider the following:

<input type="text"
  [ngModel]="value"
  (ngModelChange)="onChange($event)"/>

In this setup, ngModelChange only emits an event when the user modifies the value in the <input>. ngModelChange does not emit an event when the external value bound to ngModel changes. This is Angular's default behavior.

Now let's add a mask:

<input type="text"
  mask="00/00/0000"
  [ngModel]="value"
  (ngModelChange)="onChange($event)"/>

In this setup, ngModelChange emits an event every time the external value changes.

Expected Behavior

It is expected that adding a mask to an <input> does not change the behavior of ngModelChange

See reproduction on StackBlitz.

[paullauyc]

Same issue on reactive form

[akatakritos]

For what its worth, we worked around this by changing ngModelOptions to updateOn: 'blur', which seemed acceptable in our use case.

[shakerica]

Hello.
So this thing caused me a lot of problems in my project. We will need to remove ngx-mask lib.

The most common problem is that we are subscribing to a BehaviorSubject to set form values and we have .valueChanges in order to detect changes and update our model.
(Well of course if we use ngx-mask emitEvent: false is useless and then the problems appear)

Does anyone found a workaround or a solution for this?

[NepipenkoIgor]

@samherrmann @akatakritos @paullauyc @shakerica Thank you for using our package. For latest version everything works as expected. Also {emitEvent: false} works for reactive forms as expected too. If you still have an issue please create new issues from template . If it is a question please use stackoverflow with ngx-mask tag