Ngx-mask: Input with numeric mask won't bind back correct value to model when value of field is ""

[AcesHidden]

I have a form with a field with the mask value of "0*.0000" when the user enters a numeric value matching the mask the component model is updated with that value, however when the user empties the input so that the value should be "" it is instead 0.

If I inspect the the fields value with JavaScript or JQuery I get the correct value. Just the model is not updated correctly. This is making required validation impossible.

Any suggestions on how I can address this?

Using version 7.3.6

[AlexeyDolya]

@AcesHidden can you give an example ?

[jehanraj]

@AlexeyDolya
Ex below.
<input type="text" class="form-control" name="deskphone" mask='000-000-0000' id="deskNumber"
formControlName="deskNumber">

When you fill above input field and clear the value , the form control value should be null or empty or undefined but it has value as 0 and input box shows no value.
Hence required validation is not working.

[AlexeyDolya]

@AcesHidden try updating the package version

[AcesHidden]

@AcesHidden can you give an example ?

jehanraj gave a perfect example. I just have a different mask.

[AcesHidden]

@AcesHidden try updating the package version

I just updated to 7.7.2 with same problem. Try inspecting the model value in an on-(change) event.

<input type="text" [(ngModel)]="foo" mask="0*.0000" (change)="fooChange()"/>

public fooChange():void{
     console.log(foo);
}

Blank out the value and then tab out. You will see that foo has a value of 0 and not "" like it should be.

[bryanmartinez01]

324 problem not yet fixed

[AlexeyDolya]

@AcesHidden, Try to initialize ngModel with empty string, this will work.

[AcesHidden]

@AcesHidden, Try to initialize ngModel with empty string, this will work.

AlexeyDolya the problem with this approach is that the TypeScript compiler will not allow you to initialize a number field as "". JavaScript of course doesn't have this limitation and so at run time, model members bound to an input no matter what their type get set to "" when the field they are bound to is cleared.

[AlexeyDolya]

@AcesHidden try the updated version

[AcesHidden]

@AcesHidden try the updated version

Works perfectly! Thank you for the lightning fast response time!

[Rodigee]

This is still a problem for me with me with this example:

<input formControlName="TransportDollarsPerMile" class="form-control" id="transportDollarsPerMileId" type="text" placeholder="$" prefix="$" mask="comma_separator.2" />

When I clear out the input box, group.get('TransportDollarsPerMile') is 0.00. It should be null or "" so my angular required field validator can work.

I'm on 7.8.9

I looked at the changeset for this bug and I saw we wouldn't hit the newly changed code if the mask was comma_separator.2. I tried comma_separator.3 but still got this issue.