How to set autoclear on angular ui-mask to false?

Question

I currently have an input with a ui-mask for a phone. If the value that is inputted isn't the full length of the mask, it clears the input. Is there a way to set the ui-mask so that it doesn't clear the input upon clicking or losing focus?

<input ui-mask="[phone]" type="text"/>

Jackson

You can do it using javacsript and Angular. But I am thinking why you need to override ui-mask actual functionality. What wil be the purpose of using ui-mask then. – Classicism

Because I also have validation for different sizes of phones, its just an easy way to input the values. – Jackson

you can combine different validation in ui-mask.. – Classicism

As in ng-maxlength and ng-minlength but also different type of regex validations? – Jackson

I am posting an example. – Classicism

Answer 1

You can set a ui-options attribute that sets the option:

<input ui-mask="[phone]" ui-options="{clearOnBlur: false}" type="text" />

Wastrel

Answer 2

I didn't really find the exact answer I wanted but this is the solution I went with.

<input ui-mask="?[phone]" type="text"/>

Just so I could use the ui-mask and it wouldn't clear the field.

Jackson

Same issue, but with this solution it does not return an "invalid" on $error since the entire mask is optional. – Charlacharlady

True, but I was able to add my own $errors and check for lengths. – Jackson

Answer 3

Per the docs, you can achieve this globally in your application using app.config()and the options available:

app.config(['uiMask.ConfigProvider', function(uiMaskConfigProvider) {
  uiMaskConfigProvider.clearOnBlur(false);
}]);

Here's the full list of options: ui-mask options

Contrabandist