AngularJS Validation



  • The AngularJS provides many additional supports such as validation, data-binding to the HTML form.
  • These are the input elements used in HTML form and these are validated by using AngularJS.
  • AngularJS Validations are client-side validation, so we should use the server side validation for security aspects.

Sample code for Form Validation in AngularJS:

 Tryit<!DOCTYPE html>
<html>
    <head>
        <title>Wikitechy AngularJS Tutorials</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/
        angular.min.js"> </script>
    </head>
    <body>
        <h3>AngularJS HTML Form Validation </h3>
        <form ng-app="myApp" ng-controller="inputCtrl" name="myform">
            Enter Mobile Number : 
            <input type="text" name="number" ng-model="number" required 
            ng-minlength="10" ng-maxlength="13" ng-pattern="/^[0-9]+$/"
            ng-change="changefun()">
            <span style="color:red" ng-show="myform.number.$dirty 
            && myform.number.$invalid">
                <span ng-show="myform.number.$error.required">
                    Number is required. 
                </span> 
                <span ng-show="myform.number.$error.required">
                    Pattern does not match
                </span> 
                <span ng-show="myform.number.$error.required">
                    Minimum length 10 char
                </span> 
                <span ng-show="myform.number.$error.required">
                    Maximum length 13 char
                </span>
            </span>                    
            <p ng-show="myform.number.$valid">Valid Number</p"> 
            <p>{{mychange}}</p">
            <input type="submit" value="submit" ng-click="Submit()"/>
        </form>                 
        <script>
            var app = angular.module( 'myApp', [] );
            app.controller("inputCtrl", function($scope) {
                $scope.changefun = function () {
                    $scope.mychange = "text changed";
                };
            });
        </script>
    </body>
</html>

Code Explanation for Form validation in AngularJS:

Code Explanation for AngularJS Validation

  1. The “myform” is name of the form.
  2. The “required” attribute is used to specify the textbox should not be empty on form submission.
  3. The “ng-minlength” is used to specify the textbox should have minimum length 10 characters.
  4. The “ng-change” is used to call the function changefun() when the value of textbox is changed.
  5. The “ng-maxlength” is used to specify the textbox should not exceed maximum length 13 characters.
  6. The “ng-pattern” is used to specify the textbox should match the pattern specified in the regex.
  7. The “$dirty” is used to check the textbox has been modified or not.
  8. The “$invalid” is used to check the textbox whether it has been modified or not.
  9. The <span> is used to display the warning on the required field error.
  10. The <span> is used to display the warning on pattern error.
  11. The <span> is used to display the warning on minlength error.
  12. The <span> is used to display the warning on maxlength error.
  13. The “$valid” is used to specify the textbox value should be valid.
  14. The “mychange” is used to bind the mychange variable value.
  15. The “changefun” is used to set the mychange value as “text changed”.

Sample Output for Form validation in AngularJS:

    Sample Output for AngularJS Validation

  1. The form is displayed on page load.

  2. Sample Output1 for AngularJS Validation

  3. If the textbox is empty then the required field error shows the warning.

  4. Sample Output2 for AngularJS Validation

  5. If the textbox does not match the pattern then the pattern error shows the warning.

  6. Sample Output3 for AngularJS Validation

  7. If the textbox does not have the minimum character then the minlength error shows the warning.

  8. Sample Output4 for AngularJS Validation

  9. If the textbox exceed the maximum character length then the maxlength error shows the warning.

  10. Sample Output5 for AngularJS Validation

  11. When user enters valid mobile number there is no warning displayed.
  12. Valid Number text shows when the $valid is true.
  13. “text changed” shows when the user change the textbox value.



Related Searches to AngularJS Validation