AngularJS restrict-input directive

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.val7 = "abc";
});

app.directive('restrictInput', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attr, ctrl) {
      ctrl.$parsers.unshift(function(viewValue) {
        var options = scope.$eval(attr.restrictInput);
        if (!options.regex && options.type) {
          switch (options.type) {
            case 'digitsOnly': options.regex = '^[0-9]*$'; break;
            case 'lettersOnly': options.regex = '^[a-zA-Z]*$'; break;
            case 'lowercaseLettersOnly': options.regex = '^[a-z]*$'; break;
            case 'uppercaseLettersOnly': options.regex = '^[A-Z]*$'; break;
            case 'lettersAndDigitsOnly': options.regex = '^[a-zA-Z0-9]*$'; break;
            case 'validPhoneCharsOnly': options.regex = '^[0-9 ()/-]*$'; break;
            default: options.regex = '';
          }
        }
        var reg = new RegExp(options.regex);
        if (reg.test(viewValue)) { //if valid view value, return it
          return viewValue;
        } else { //if not valid view value, use the model value (or empty string if that's also invalid)
          var overrideValue = (reg.test(ctrl.$modelValue) ? ctrl.$modelValue : '');
          element.val(overrideValue);
          return overrideValue;
        }
      });
    }
  };
});

<!doctype html>
<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <link rel="stylesheet" href="style.css">
</head>
<body ng-controller="MainCtrl">
  An AngularJS directive which restricts the input to certain characters only (view value is immediately reset, model value doesn't change)
  <hr/>
  
  digitsOnly<br/><input ng-model="val1" restrict-input="{type: 'digitsOnly'}"/> {{val1}}<br/>
  lettersOnly<br/><input ng-model="val2" restrict-input="{type: 'lettersOnly'}"/> {{val2}}<br/>
  lowercaseLettersOnly<br/><input ng-model="val3" restrict-input="{type: 'lowercaseLettersOnly'}"/> {{val3}}<br/>
  uppercaseLettersOnly<br/><input ng-model="val4" restrict-input="{type: 'uppercaseLettersOnly'}"/> {{val4}}<br/>
  lettersAndDigitsOnly<br/><input ng-model="val5" restrict-input="{type: 'lettersAndDigitsOnly'}"/> {{val5}}<br/>
  validPhoneCharsOnly - digits ()/- <br/><input ng-model="val6" restrict-input="{type: 'validPhoneCharsOnly'}"/> {{val6}}<br/>
  digitsOnly, invalid initial model value<br/><input ng-model="val7" restrict-input="{type: 'digitsOnly'}"/> {{val7}}<br/>
  custom restrict - odd digits only<br/><input ng-model="val8" restrict-input="{regex: '^[13579]*$'}"/> {{val8}}<br/>
  custom restrict - no angled brackets<br/><input ng-model="val9" restrict-input="{regex: '^[^<>]*$'}"/> {{val9}}<br/>

  <hr/>
  TODO:
  <ol>
    <li>Fix the strange issue where if you type an invalid character twice, the view lets it through (although not the model) until the next character is typed</li>
  </ol>
  
  <!--scripts-->
  <script>document.write("<base href=\"" + document.location + "\" />");</script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
  <script src="app.js"></script>    
</body>
</html>