Angular model starts as "dirty"

[ryanbuening]

In Angular you can check the state of the form; if a control as been touched for example. When using imask, the dirty property of the form is automatically set to true. The expectation is that the form's dirty property should be false until the user changes an input value.

text-mask had a similar issue and apparently solved it with this commit. Was wondering if something similar could be done in imask?

[uNmAnNeR]

@ryanbuening thanks again for deep explanation. I can't belive, but with your help imask may become almost perfect :)

It seems that it was already done in angular-plugin v4.0.0 or i am not able to recognize the difference. May be onchange event is fired in onAccept handler accidentally.

[ryanbuening]

@uNmAnNeR imask is great. I'm glad I can help in any way.

Let me know if you would like me to create a repo or research this issue further. Thanks.

[uNmAnNeR]

@ryanbuening I did some research.
Angular call writeValue in async way sometime later after component creation. At this time mask is already initialized so change event is fired. Also as i understand it works this way only when ngModel is used. Otherwise writeValue is not called.

What's done in text-mask plugin is delaying mask initialization untill first operation with value. But i don't like it.

May be you know better way? Is it possible to hook form initialization in Angular? or somehow else to know is it init step or any other application action?

[uNmAnNeR]

relates angular/angular#14988

[uNmAnNeR]

we can't do it like text-mask, we need some way to detect if view was initialized completely and that's not ngAfterViewInit unfortunately.

[ryanbuening]

The Angular hook order is outlined here: https://angular.io/guide/lifecycle-hooks#peek-a-boo-all-hooks. Not sure if it's possibly to detect if the view was initialized completely from any of those?

[uNmAnNeR]

yes, the last step of initialization is ngAfterViewInit but this is not what we need.

One more point is that imask fires onAccept event when new value is set. It seems unnesessary, because the value is already should be in model, no need to update it one more time. But it is there because value could be changed during masking, some symbols can be omited, etc. So this step can't be skipped. Now there is no check that value-to-set !== value-was-set and onAccept event fires every time. I can add this check, but this will solve problem not completely though.

Or may be any other ideas?

[ryanbuening]

I don't have any better ideas currently. I was looking around at the other masking libraries for Angular. ngx-mask had a similar issue as well. I found a couple commits related to the issue. Not sure if any of these are helpful?:

JsDaddy/ngx-mask@f832233
JsDaddy/ngx-mask@1c3c564

[uNmAnNeR]

@ryanbuening Happy New Year without bugs! :)

[ryanbuening]

@uNmAnNeR Great! Thanks for the fix 👍

[smellai]

Hi @uNmAnNeR, we have similar issue with react final-form. Input fields using masks starts as "dirty". Is there anything that we need to do on our side to fix this behaviour? Thanks