Ngx-mask: Mask is not working for input with type = number

[AntonDershen]

If I create number input with mask and set focus to input I will see error in console:
DOMException: Failed to set the 'selectionStart' property on 'HTMLInputElement': The input element's type ('number') does not support selection.

[NepipenkoIgor]

@AntonDershen Yes we use mask with text type. Please provide your use case for number type field

[nazar-kuzo]

@NepipenkoIgor,
I have faced with same problem at some point.
My use case:
I have built a text-control component that aggregates all the logic about validation etc.
This field has ability to apply field type (text, number, etc) as well as apply mask or pattern.

The problem that I have is:
I cannot disable the mask. Why do I need that? Since I have control that has ability to have a mask
but I dont want mask to be applied everytime I create this control. Even if I apply empty mask expression, mask directive still injects into the pipeline and listens to onFocus events etc.

It would be great to have ability to disable somehow the mask by condition, since angular doesnt support conditional attributes appliance

[nazar-kuzo]

@NepipenkoIgor,

Can we have this lines of code at the beginning of keydown/onFocus(click) events?

---

// ignore event handling when mask is not applied
if (!this._maskValue) {
  return;
}

To avoid ngx-mask logic to be injected when actual mask is not applied(not needed)

[Thegrep01]

@nazar-kuzo Can you show some examples ? Because i did find this problem

[nazar-kuzo]

@Thegrep01,

First off:
I want to have conditional ngx-mask appliance, so mask attribute is always present on input but the value for mask is empty (undefined or empty string). Since Angular doesnt allow to have conditional attribute appliance.

Steps to reproduce:

1. Create input[type=number] and apply attribute mask=""
2. put focus on input
3. open debug console and find errors in mask directive file

Expected Result:
Event handlers should not perform any actions since mask is empty

Actual Result:
Event handlers perform actions even when mask is empty

Proposed Solution:

put this lines of code on each event handler for directive to ignore any directive event actions when actual mask value is missing (lets say mask is not applied)

// ignore event handling when mask is not applied
if (!this._maskValue) {
return;
}

[Thegrep01]

@nazar-kuzo okay but for what you need to use mask for input type=number, if you could not enter symbols or letters, only numbers

[nazar-kuzo]

@Thegrep01

I get your point, but from technical standpoint:

• input[type=text] provides string value
• input[type=number] provides number value

For sure we can say that we can have a crunch in a code that will parse string value to number
but It is not something that follows the common sense in development

[Thegrep01]

@nazar-kuzo if you need to get a number value from input use input type text but initialize like this, it will be return you number value and wont emit events with empty mask
this.form = new FormControl(0);

[arimus]

Just another note here for others who stumble on this. Yes, you can use a text type to prevent the error, but note that in certain context like mobile / ionic you won't get the specialized numeric keyboard when inputting, which is a user experience concern....unless you add a pattern to the input field.

See: https://stackoverflow.com/questions/6178556/phone-numeric-keyboard-for-text-input

[nazar-kuzo]

@arimus,

Pattern is a crutch for numeric, but it wont work for type=email where specialized keyboard setup will apper.

To fix the issue with a mask I have created a custom directive that handles the errors.

[maccurt]

So I use Angular and I cant use the mask if the type="number". Keep in mind the object property is bound to is of type number (typescript) and if you don't make it a number (type="number" it will replace your number with a string. So if my original value is 12.33 and I change the input to 12.44, my object will have the string value "12.44" and I can't do math on that unless I parse it back to a number. If the input is of type="number" the property will truly be set to the number 12.44. I still can't believe after all these years of coding we are still dealing with input that don't do number nicely. THIS IS NOT RANT AGAINST NG-MASK... Just my frustration about how this should really be built into HTML controls at this point..

[wilker7ribeiro]

I think this should be reopened but with another use case, mobile compatibility.

I want to use this lib for my Cordova project for a number input, but input[type="text"] opens the full keyboard while input[type="number"] opens numeric keyboard.