CODEWITHSUNDEEP
angularjsangularjs-directiveangular-ui
Jaskaye17
Jaskaye17

Reputation: 637

How do I implement angular ui-mask?

I am trying to create multiple masked input fields. Angular ui-mask looks like the way to go, however, I can't find very good documentation on the utility. I found an example for credit cards that was very nicely done. I would like to implement this feature in almost exactly the same way, but with 1) phone number 2) decimal 3) percentage 4) email 5) currency, such that the fields are dynamically masked as the user types. My question is how would I go about using ui-mask to accomplish these tasks? Or is there a better way to achieve this? Examples or links to documentation would be appreciated

Upvotes: 0

Views: 3020

Answers (1)

UserNeD
UserNeD

Reputation: 1519

I guess you can find your answer here: https://github.com/angular-ui/ui-utils/issues/16

As it is explained in the link a dynamic way is that you can get the mask from a scope/controller variable, check the input and change the mask as needed like:

<input type="text" ui-mask="{{mask}}" ng-keyup="onKeyUp()" ng-model="myinput">


$scope.myinput = '';
var defaultMask  = '(99) 9999-9999';
$scope.mask = defaultMask;
$scope.onKeyUp = function(){
  if ($scope.myinput.slice(0,3) == '119') { // (11) 9 means mobile, or instead, you could use a regex
    $scope.mask = '(99) 99999-9999';
  } else {
    $scope.mask = defaultMask;
  }
};

Upvotes: 1

Related Questions