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="(999) 999-9999" type="text"/>

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. — Ved, Dec 20 '14 at 04:47
Because I also have validation for different sizes of phones, its just an easy way to input the values. — Tyler Pflueger, Dec 20 '14 at 04:57
As in ng-maxlength and ng-minlength but also different type of regex validations? — Tyler Pflueger, Dec 20 '14 at 05:09

score 17 · Answer 1 · answered Apr 01 '15 at 01:16

17

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

<input ui-mask="(999) 999-9999" ui-options="{clearOnBlur: false}" type="text" />

answered Apr 01 '15 at 01:16

John Drouhard

1,209
2
12
18

score 0 · Answer 2 · answered Dec 22 '14 at 17:36

0

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

<input ui-mask="?(999) 999-9999" type="text"/>

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

answered Dec 22 '14 at 17:36

Tyler Pflueger

827
2
12
17

Same issue, but with this solution it does not return an "invalid" on $error since the entire mask is optional. – roadsunknown Dec 23 '14 at 15:42
True, but I was able to add my own $errors and check for lengths. – Tyler Pflueger Dec 23 '14 at 21:21

score 0 · Answer 3 · answered May 04 '18 at 14:19

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

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

3 Answers3