Angular Parse & Validate

by mslocum

HTML

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.17/angular.js"></script>
<form name="myForm">
    <input type="text" name="text" ng-model="text" do-stuff/>
    <br/>{{text}}
    <div ng-show="myForm.$invalid">
        Errors:
        <ul>
            <li ng-repeat="(key, value) in myForm.$error">{{key}}</li>
        </ul>
    </div>
</form>

JavaScript

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

app.directive('doStuff', function($compile){
    return {
        require: 'ngModel',
        link: function(scope, el, attrs, ngModel) {
            ngModel.$parsers.push(function(value) {
        		return value.split('');
    		});
            
            ngModel.$validators.minLength = function(modelValue, viewValue) {
                return modelValue && modelValue.length >= 4;
            };
            ngModel.$validators.notPalindrome = function(modelValue, viewValue) {
                return modelValue && modelValue.reverse().join('') == viewValue;
            };
        }
    }
});