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

angular-ui, angularjs

Solution

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.

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.

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.
                });
            }
        }
    });
})();    

- 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.

Problem

Original source