Code Samples: How to add custom validation to an AngularJS form field

Friday, November 25, 2016
How to add custom validation to an AngularJS form field

<!DOCTYPE html>
<html>
<head>
<title>How to add custom validation to an AngularJS form field</title>
<style type="text/css">
    div.log {
        border: 2px solid gray;
        color: black;
        padding: 10px;
        font-size: 20px;
        font-family: monospace;
    }
    div.log div {
        padding: 10px;
    }
</style>

<script src="http://code.angularjs.org/1.2.12/angular.js"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

<script type="text/javascript">
    var app = angular.module("myApp", []);

    app.controller("MyCustomValidationController", function($scope, $http) {
        $scope.items = [];
        $scope.items.push({"name": "Pritom", "type": "A"});
        $scope.items.push({"name": "Kumar", "type": "B"});

        var log = $(".log");
        $scope.log = function(e) {
            log.prepend("<div>" + e + "</div>");
        }

        $scope.error = function(e) {
            log.prepend("<div style='color:red;'>" + e + "</div>");
        }
    })

    app.directive("myCustomValidation", function() {
        return {
            restrict: "A",
            require: "ngModel",         
            link: function(scope, elem, attrs, ctrl) {
                ctrl.$parsers.unshift(function(v) {
                    scope.$evalAsync(function() {
                        scope.log("Parsers=" + v)
                    })
                    if(v.length > 10) {
                        ctrl.$setValidity('myCustomValidation', false)
                    }
                    else {
                        ctrl.$setValidity('myCustomValidation', true)
                    }
                    return v
                })
                ctrl.$formatters.unshift(function(v) {
                    scope.$evalAsync(function() {
                        scope.log("Formatters=" + v)
                    })
                    return v
                })
                elem.on('keyup', function (evt) {
                    if(ctrl.$error.maxlength) {
                        scope.$evalAsync(function() {
                            scope.error("Maxlength")
                        })
                    }
                    if(ctrl.$error.required) {
                        scope.$evalAsync(function() {
                            scope.error("Required")
                        })
                    }
                    if(ctrl.$error.myCustomValidation) {
                        scope.$evalAsync(function() {
                            scope.error("MyCustomValidation")
                        })
                    }
                })
            }
        }
    })
</script>
</head>

<body>
 <div data-ng-app="myApp" data-ng-controller="MyCustomValidationController">
     <div>
         <div ng-form="myForm" data-ng-repeat="item in items">
             <div style="border:1px solid blue;padding:10px;">
                <input type="text" name="name" ng-model="item.name" ng-maxlength="10" 
                       my-custom-validation required style="width:50%;"/>
                <select ng-model="item.type" my-custom-validation required style="width:48%;" name="type">
                    <option value="">None</option>
                    <option value="A">A</option>
                    <option value="B">B</option>
                    <option value="C">C</option>
                </select>
             </div>
         </div>
         <div class="log"></div>
     </div>
 </div>
</body>
</html>
Pages

Friday, November 25, 2016

How to add custom validation to an AngularJS form field

No comments:

Post a Comment
