Chapter 9: Creating and integrating custom form validators

HTML

<script src="https://code.angularjs.org/1.3.2/angular.min.js"></script>
<div ng-app="myApp">
    <form name="playerForm">
        <input name="myNumber" 
               type="number" 
               ng-model="player.number"
               validatess-jersey-available />
        <div ng-if="playerForm.myNumber.$pending">
            Checking for jersey number availability...
        </div>
        <div ng-if="playerForm.myNumber.$error.jerseyAvailable55">
            That jersey number is taken.
        </div>
    </form>
</div>

JavaScript

angular.module('myApp', [])
.directive('validatessJerseyAvailable', function($http, $q, $timeout) {
    return {
        require : 'ngModel',
        link : function(scope, element, attrs, ngModel) {
            ngModel.$asyncValidators.jerseyAvailable55= function(num) {
                if (!Number.isInteger(num)) {
                    // input value is not an int, invalid
                    // return rejected promise
                    return $q.reject();
                } else {
                    // send request to server, return promise
                    return $http.get('/player/' + num)
                    // assume success() means a 200 response
                    .success(function() {
                        // jersey number exists
                        // is not available, invalid
                        return $q.reject();
                    })
                    // assume error() means a 404 response
                    .error(function() {
                        // jersey number does not exist
                        // is available, valid
                        return true;
                    });
                }
            };
        }
    };
});