Skip to content
Related Articles

Related Articles

AngularJS | Form Validation

View Discussion
Improve Article
Save Article
Like Article
  • Difficulty Level : Hard
  • Last Updated : 23 Apr, 2019

AngularJS performs form validation on the client-side. AngularJS monitors the state of the form and input fields (input, text-area, select), and notify the user about the current state. AngularJS also holds information about whether the input fields have been touched, modified, or not.
Form input fields have the following states:

  • $untouched: It shows that field has not been touched yet.
  • $touched: It shows that field has been touched.
  • $pristine: It represents that the field has not been modified yet.
  • $dirty: It illustrates that the field has been modified.
  • $invalid:It specifies that the field content is not valid.
  • $valid:It specifies that the field content is valid.

These all are the properties of the input field which can be either true or false.
Forms have the following states:

  • $pristine: It represents that the fields has not been modified yet.
  • $dirty: It illustrates that one or more fields has been modified.
  • $invalid:It specifies that the form content is not valid.
  • $valid:It specifies that the form content is valid.
  • $submitted:It specifies that the form is submitted.
  • These all are the properties of the form which can be either true or false.
    This states can be used to show meaningful messages to the user.
    Example 1:




    <!DOCTYPE html>
    <html>
    <script src=
    </script>  
    <body ng-app="">
    <form name="form1">
    <p>Name:
    <input name="username" ng-model="username" required>
    <span ng-show="form1.username.$pristine && form1.username.$invalid">
    The name is required.</span>
    </p>
    <p>Address:
    <input name="useraddress" ng-model="useraddress" required>
    </p>
    </form>
    <p>We use the ng-show directive to only 
    show the error message if the field has 
    not modified yet AND content present in 
    the field is invalid.</p>
    </body>
    </html>

    Output:

    Custom validation:To create your own validation function add a new directive to your application, and deal with the validation inside a function with certain specified arguments.

    Example 2:Create your own directive, containing a custom validation function, and refer to it by using app-directive. The field will only be valid if the value is greater than or equal to 18.




    <!DOCTYPE html>
    <html>
    <script src=
    </script>  
    <body ng-app="developapp">
    <form name="form1">
    Username:
    <input name="username" required><br><br>
    Age:
    <input name="userage" ng-model="userage" required app-directive>
    </form>
      
    <p>The input's valid state is:</p>
    <h1>{{form1.userage.$valid}}</h1>
    <script>
    var app = angular.module('developapp', []);
    app.directive('appDirective', function() {
        return {
            require: 'ngModel',
            link: function(scope, element, attr, mCtrl) {
                function myValidation(value) {
                    if (value >=18) {
                        mCtrl.$setValidity('charE', true);
                    } else {
                        mCtrl.$setValidity('charE', false);
                    }
                    return value;
                }
                mCtrl.$parsers.push(myValidation);
            }
        };
    });
    </script>
      
    <p>The input field must have 
    user age greater than 18 to be 
    considered valid for voting.</p>
      
    </body>
    </html>

    Output:


    My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!