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.
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.
});
}
}
});
})();
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.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments