How to use angular ui-mask to mask a phone number with optional extension?

Question

We have the demo here on the angular-ui page.

Wondering how we can write a mask with optional extension number.

(999) 999-9999 ext. 999 will make the extension required.

Answer 1

I shared this same problem with you. There is a completely undocumented optional character feature for this component. I could only find it by reading the source code.

The solution for your mask would be:

(999) 999-9999 ext. ?9?9?9

Question marks in your mask will flag the next character as optional. Trust me, it works.

Sorry for taking so long to answer.

Answer 2

(999) 999-9999 ext. ?9?9?9

This will work good but if you want to clear on blur and put the mask back then you need a little more, I used like this

<input type='text'
  ng-model='customer.phone'
  ui-mask="{{phoneMask}}"
  ng-blur="removeMask()"
  ng-focus="placeMask()" />

And in my controller:

$scope.phoneMask= "(999) 999-9999 ext. ?9?9?9";
$scope.removeMask = function () {
   if ($scope.rep.phone.length === 10) {
        $scope.phoneMask= "(999) 999-9999";
    }
};
$scope.placeMask = function () {
  $scope.phoneMask= "(999) 999-9999 ext. ?9?9?9";
}

Hope it will help!

Answer 3

Still no answer for this one after two weeks. I would assume all agreed this AngularUI is too limited in handling this situation.

I ended up using jquery.inputmask (http://github.com/RobinHerbots/jquery.inputmask).

We have been using this jQuery extension library since there is no Angular. It appears still the most powerful input mask. At least it has all functions I need.

Here is my setup.

1. First, of course is to NuGet or download the library. The current version (3.0.55) separates functions into different js files. (date, numeric, phone...) Be sure to include all that you need.

2. Create a directive for input mask attribute or class. Use link in this directive to use jQuery to apply input mask:

Here is the code:

(function(){
    'use strict';        
    var directiveId = 'myInputMask';
    angular.module('myApp')..directive(directiveId, function() {
        return {
            restrict: 'AC',
            link: function (scope, el, attrs) {
                el.inputmask(scope.$eval(attrs.myInputMask));
                el.on('change', function() {
                    scope.$eval(attrs.ngModel + "='" + el.val() + "'");
                    // or scope[attrs.ngModel] = el.val() if your expression doesn't contain dot.
                });
            }
        }
    });
})();    

1. At last, apply this directive in attribute or class in our Html.

Here is the Html:

<input type="text" id="phone"
    my-input-mask="{mask: '(999)999-9999[ ext. 9999]', greedy: false}"
    required="" ng-model="employee.phone">

Of course, with jquery.inputmask, we can have much more complex input mask:

<input type="text" id="salary"
    dnr-input-mask="{'alias': 'numeric', 'groupSeparator': ',', 'autoGroup': true, 'digits': 2, 'digitsOptional': true, 'placeholder': '0'}"
    model="employee.salary">

So the conclusion: AngularUI still has a long way to go to satisfy our need. At this moment, jQuery.inputmask still thrives.

Answer 4

A good solution for this problem is to use ngMask which allows you to do exactly what you want without jQuery. To do that just add an '?' after the character you want to be optional:

mask="9?9999-9999

This is great for inputs like Brazilian phone numbers, which can have both 8 or 9 characters.