How to apply AngularJS Validation

AngularJS Validation

AngularJS support client-side form validation.  AngularJS inspect the state of the form and input fields and inform you about the current state. It also contains information about touched, modified etc.

It provides the facility to create your own validation method or you can use standard HTML5 attributes to validate input.

Form State and Input State

Following are the states of Input fields:

$untouched: - This properties notify that field has not been touched yet

$touched: - This properties notify that field has been touched

$pristine: - This property notifies that field has not been modified yet

$dirty: - This property notifies that field has been modified

$invalid: - This properties notify that field content is not valid

$valid: - This property notifies that field content is valid

Above are the input field properties and it will be eight true or false.

Following are the states of Forms:

$pristine :- This properties notify that, No fields have been modified yet

$dirty :-  This properties notify that one or more have been modified

$invalid :- This properties notify that the form content is not valid

$valid :-This properties notify that the form content is valid

$submitted :- This properties notify that the form is submitted

Above are the Forms properties and it will be eight true or false. 

AngularJS directives for form validation

Here is a list of AngularJS directive which can be apply on a input field to validate it's value.

    <input type="text"
     ng-model="{ string }"
     [name="{ string }"]
     [ng-required="{ boolean }"]
     [ng-minlength="{ number }"]
     [ng-maxlength="{ number }"]
     [ng-pattern="{ string }"]
     [ng-change="{ string }"]>
    </input>

<div ng-app="myApp" ng-controller="Employee1Controller">
        <h2>Validation Example</h2>

        <form name="myForm" novalidate>
            <p>
                Name:<br>
                <input type="text" name="username" ng-model="username" required>
                <span style="color:red" ng-show="myForm.username.$dirty && myForm.username.$invalid">
                    <span ng-show="myForm.username.$error.required">Name is required.</span>
                </span>
            </p>
            <p>
                Email:<br>
                <input type="email" name="useremail" ng-model="useremail" required>
                <span style="color:red" ng-show="myForm.useremail.$dirty && myForm.useremail.$invalid">
                    <span ng-show="myForm.useremail.$error.required">Email is required.</span>
                    <span ng-show="myForm.useremail.$error.email">Invalid email address.</span>
                </span>
            </p>
            <p>
                Address:<br>
                <input type="text" name="useraddress" ng-model="useraddress" required>
                <span style="color:red" ng-show="myForm.useraddress.$dirty && myForm.useraddress.$invalid">
                    <span ng-show="myForm.useraddress.$error.required">Address is required.</span>
                </span>
            </p>
            <p>
                <input type="submit" ng-disabled="myForm.username.$dirty && myForm.username.$invalid ||
      myForm.useremail.$dirty && myForm.useremail.$invalid ||myForm.useraddress.$dirty && myForm.useraddress.$invalid">
            </p>

        </form>
    </div>

    <script>

        var app = angular.module('myApp', []);
        app.controller('Employee1Controller', function ($scope) {
            $scope.username = 'alok singh';
            $scope.useremail = 'salok0282@gmail.com';
            $scope.useraddress = 'Delhi NCR';
        });

    </script>

Validation Example

Name:
Name is required.
Email:
Email is required. Invalid email address.
Address:
Address is required.

Custom Validation

You can create your own validation function in AngularJS. While creating your own validation function you need to add a new directive in your application and do validation inside a function with certain specified arguments.

<div ng-app="myApp">

        <form name="myForm">

            <input name="name" ng-model="name" required my-directive>

        </form>

        <p>The input's valid state is:</p>

        <h1>{{myForm.name.$valid}}</h1>

    </div>

    <script>

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

        app.directive('myDirective', function () {

            return {

                require: 'ngModel',

                link: function (scope, element, attr, mCtrl) {

                    function myValidation(value) {

                        if (value.indexOf("singh") > -1) {

                            mCtrl.$setValidity('charSingh', true);

                        } else {

                            mCtrl.$setValidity('charSingh', false);

                        }

                        return value;

                    }

                    mCtrl.$parsers.push(myValidation);

                }

            };

        });

    </script>

Complete validation example