Input validation advance in AngularJS

How to validate input values and show custom error message in AngularJS?

In the previous post, we learnt how to validate the HTML form using AngularJS and notify the user. In this post, we will go one step ahead and learn how to check for validation and give custom error message to the user.

In below code snippet, we have <style> block in which CSS style defined for ng-invalid and ng-valid that are set to the element when AngularJS mark them as invalid and valid respectively.

In the <script> block, we have $scope.InputValue property defined. We have also defined ValidationError function that returns error message based on whether the passed item is invalid.

<style>
    .ng-valid{
        border:4px double green;
    }
    .ng-invalid {
        border: 4px double red;
    }
</style>
<script>
    var app = angular.module("app", []);

    app.controller("InputController", function ($scope) {
        $scope.InputValue = "Type here";

        $scope.ValidationError = function (item) {
            if (item.$dirty && item.$error.required)
            {
                return "This text box is mandatory !";
            }
            else
            {
                return "";
            }
        };
    });
</script>

In the HTML block, we have a text box with the ng-model defined as the $scope property. We have also defined following AngularJS attributes

ng-minlength - to validate that the value of the element must be 5 characters long
ng-maxlength - to validate that the value of the element must be 20 charactesr long

Next we have ng-show directive that shows or hide the element based on its value returned. In this element, we are calling ValidationError functiont that returns the custom error message if the text box is marked invalid.

<div ng-app="app" ng-controller="InputController">
    <form name="myForm" action="~/Views/Forms/Checkbox.cshtml" method="post">
        <div style="padding:10px;">

            <input type="text" name="txt" ng-model="InputValue" ng-minlength="5" 
                   ng-maxlength="20" required />
            <span ng-show="myForm.txt.$invalid" style="color:red;">{{ ValidationError(myForm.txt) }}</span>
            <input type="submit" value="Submit" />

            <hr />
            <p><b>Is Required:</b> {{ !!myForm.$error.required}}</p>

            <hr />
            <p><b>Is Textbox Invalid:</b> {{ myForm.txt.$invalid}}</p>
            <p><b>Text box Error:</b> {{myForm.txt.$error}}</p>

            <hr />
            <p><b>Is Form Valid:</b> {{ myForm.$valid}}</p>
            <p><b>Form Error:</b> {{myForm.$error}}</p>            
        </div>
    </form>
</div>