入力時にマスクを設定する方法

Question

クレジットカードの種類と番号の入力を選択しました。番号を確認するには、ng-patterを使用しますか？私はjquery iputmaskを使用したいが、マスクは設定されていない。 選択変更に動的に設定されたマスクを設定するにはどうすればよいですか？

<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

Answer 1

におけるその利用可能 jQuery-Mask-Plugin

を使用することができます...ここでは、サンプル作業溶液です。

マスクとパターンの値を変更しましたので、必要に応じて変更する必要があります。

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>

Answer 2

あなたのカスタム関数を使用したUI-mask.For UI-mask属性を使用することができます。

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

Answer 3

あなたはあなたがそれを動作させるためにあなたのコード内のいくつかの変更を行うことができますgithubの