AngularJS: creating custom $parsers

Adding custom validator to the inputs

by manoj

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular-messages.min.js"></script>
<form name="sampleForm">
    <input name="strongSecret" type="text" ng-model="strongSecret" strong-secret required placeholder="Please provide stron secret">
    <ul class="error-msgs" ng-messages="sampleForm.strongSecret.$error">
        <li ng-message="numberValidator">Strong secret has to contain at least 1 number</li>
        <li ng-message="uppercaseValidator">Strong secret has to contain at least 1 uppercase</li>
        <li ng-message="sixCharactersValidator">Strong secret has to exactly 6 characters long</li>
    </ul>
</form>

CSS

* { padding: 0px; margin: 0px; font-size: 12px; }
input { width: 90%; margin: 0 auto; padding: 5px; margin: 5px; }
.error-msgs li { padding: 5px; color: red;  }

JavaScript

angular.module('app', ['ngMessages']);
angular.module('app').directive('strongSecret', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attr, ctrl) {
            function customValidator(ngModelValue) {
                if (/[A-Z]/.test(ngModelValue)) {
                    ctrl.$setValidity('uppercaseValidator', true);
                } else {
                    ctrl.$setValidity('uppercaseValidator', false);
                }
                if (/[0-9]/.test(ngModelValue)) {
                    ctrl.$setValidity('numberValidator', true);
                } else {
                    ctrl.$setValidity('numberValidator', false);
                }
                if (ngModelValue.length === 6) {
                    ctrl.$setValidity('sixCharactersValidator', true);
                } else {
                    ctrl.$setValidity('sixCharactersValidator', false);
                }
                return ngModelValue;
            }
            ctrl.$parsers.push(customValidator);
        }
    };
});