AngularJS form validation numeric with specific length

by Duke Dinh

HTML

<script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.2.0.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<div ng-app="myApp" ng-controller="myCtrl">
    <form action="" name="myForm">

       <input type="text" ng-model="two" ng-valid-func="validator" typeahead="suggestion for suggestion in option($viewValue)"/>
    </form>   
</div>

CSS

input.ng-invalid{
    background-color: #fdd !important;    
}

input.ng-valid{
    background-color: #dfd !important;    
}

JavaScript

var app = angular.module('myApp', ['ui.bootstrap'])

var myCtrl = function($scope, limitToFilter){

    $scope.one = ""
    $scope.two = ""
    
     $scope.option = function(value) {
           console.log(value);    
      return limitToFilter($scope.options, 10);   
  };
    
$scope.options = ['0987','1234','4567','8765'];   
    
       
    $scope.validator = function(val){
        return (val.length == 4 && (val % 1 === 0))
    }
    
    $scope.run = function(value){
        console.log(value);
    };   
          
      
    }
  
app.directive('ngValidFunc', function() {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      ctrl.$parsers.unshift(function(viewValue) {
        if (attrs.ngValidFunc && scope[attrs.ngValidFunc] && scope[attrs.ngValidFunc](viewValue, scope, elm, attrs, ctrl)) {
          ctrl.$setValidity('custom', true);
        } else {
          ctrl.$setValidity('custom', false);
        }
        return elm.val()
      });
    }
  };
});