How to set mask on input

Question

I've select with types of credit card and input for number. For validating number i use ng-patter? for masking i want use jquery iputmask, but mask not set. How can i set dynamicly set mask on select change?

<div ng-controller="MyCtrl">

<h3>
 With dynamic pattern
</h3>
<select ng-model="dataTypeValue" ng-options="t as t.label for t in dataTypeList" ng-change="getCustomPattern(MyForm.input)" >

</select>

<input type="text"  ng-model="textValue.text" ng-pattern="getPattern()" name="input" placeholder="{{placeholder}}">

My example

score 1 · Answer 1 · answered Nov 02 '16 at 06:25

1

You can use ui-mask.For ui-mask attribute use your custom function.

<input ng-model="maskDemo" ui-mask="'99-99-9999'">

answered Nov 02 '16 at 06:25

Jay

81
4

score 0 · Answer 2 · answered Nov 02 '16 at 06:38

0

you can use jQuery-Mask-Plugin

its available in github

answered Nov 02 '16 at 06:38

Maheskumar Subramani

69
1
9

score 0 · Accepted Answer · answered Nov 02 '16 at 07:01

You could do some modifications in your code to make it work.. Here is a sample working solution.

I have modified the mask and pattern values, you might need to change it to your needs.

var myApp = angular.module('sampleApp', []);

myApp.controller("sampleController", function($scope) {
    var tThis = this;
    $scope.dataTypeList = [{
      'id': 1,
      "label": "VISA"
    }, {
      'id': 2,
      "label": "MASTER"
    }, {
      'id': 3,
      "label": "AMEX"
    }];

    $scope.defaultPattern = /[0-9]+/;
    $scope.getPattern = function() {
      return $scope.defaultPattern;
    };
    $scope.placeholder = '9999 0000 9999 9999';
    $scope.mask = '9999 0000 9999 9999';
    $scope.getPlaceholder = function() {
      return $scope.placeholder;
    };
    var isParser = false;
    $scope.getCustomPattern = function() {

      var dataTypeId = $scope.dataTypeValue.id;
      if (dataTypeId == 3) {
        $scope.defaultPattern = /^[0-9]{4} [0-9]{4} [0-9]{4} [0-9]{3}$/;
        $scope.placeholder = '9999 0000 9999 999';
        $scope.mask = '9999 000 9999 999';
      } else if (dataTypeId == 2) {
        $scope.defaultPattern = /^[0-9]{4} [0-9]{4} [0-9]{4} [0-9]{4}$/;
        $scope.placeholder = '9999 1111 9999 9999';
        $scope.mask = '9999 1111 9999 99990';
      } else {
        $scope.defaultPattern = /^[0-9]{4} [0-9]{4} [0-9]{4} [0-9]{4}$/;
        $scope.placeholder = '9999 2222 9999 9999';
        $scope.mask = '9999 2222 9999 99990';
      }

      return $scope.defaultPattern;
    };
  })
  .directive('creditcard', function() {
    var directive = {
      scope: {
        inputMask: '@'
      },
      link: link,
      require: 'ngModel',
      restrict: 'A'
    };
    return directive;

    function link($scope, el, attrs, model) {
      $scope.$watch(function() {
        return $scope.inputMask;
      }, function(newValue, oldValue) {
        $(el).inputmask({
          mask: newValue
        });
      })
      $(el).inputmask({
        mask: attrs.inputMask
      });
    }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.3/jquery.inputmask.bundle.js"></script>
<div ng-app="sampleApp">
  <div ng-controller="sampleController">

    <h3>
 With dynamic pattern
</h3>
    <select ng-model="dataTypeValue" ng-options="t as t.label for t in dataTypeList" ng-change="getCustomPattern()">

    </select>

    <input type="text" ng-model="textValue.text" ng-pattern="{{pattern}}" name="input" placeholder="{{placeholder}}" input-mask="{{mask}}" creditcard>
  </div>
</div>

How to set mask on input

3 Answers3