Form Validation in AngularJS

You can perform validation at client side in AngularJS. You can use predefined attributes of HTML5 to validate input, or you can create your own validation functions. You can use ‘required’ attribute of HTML5, to validate input.

Code for Demo.HTML

<!DOCTYPE html>
<html>
     <head>
          <script src="Scripts/angular.js"></script>
     </head>
     <body ng-app="">
          <h3>Enter the information in the textbox</h3>
          <formname="myForm">
               Name =: <input type="text" name="myName" ng-model="DataInput" required>
               <span ng-show="myForm.myName.$touched &&myForm.myName.$invalid">The name is required.</span>
          </form>
          <h3>The current input's  state is:</h3><h1>{{myForm.myName.$valid}}</h1>
     </body>
</html>


In the above code required attribute is used. It means you have created name textbox as a compulsory field. When you drag your cursor at this textbox, it will show you that this field is compulsory to fill. When you focus on this textbox and without filling any data you click some other part on the page, you will get the message “The name is required.”.

You can access angularJS form properties as follows:
  • To access the form: <form name>.<angular property>
  • To access an input: <form name>.<input name>.<angular property>
The error message shows due to line

<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">The name is required.</span>

In the above code myForm is the name of form and myName is the name of textbox.
If you do not enter any data in the textbox then “myForm.myName.$valid” property will give the status as false.
Execute the Demo.html file you will get the output as follows:

Output:

form validation

You can also use CSS with input as example

<style>
     input.ng-invalid
     {
          background-color: red;
     }
     input.ng-valid
     {
          background-color: lightgreen;
     }
</style>


If the input field is empty then background color will be red otherwise it will be lightgreen.
Let us take one more example on validation.

Code for Demo.HTML

<!DOCTYPE html>
<html>
     <head>
          <script src="Scripts/angular.js"></script>
          <!--angular.js file located in Scripts folder-->
          <style>
               table, th, td
               {
                    border: 1px solid grey;
                    border-collapse: collapse;
                    padding: 5px;
               }
               table tr:nth-child(odd)
               {
                    background-color: #ffe6e6;
               }
               table tr:nth-child(even)
               {
                    background-color: #ccffcc;
               }
          </style>
     </head>
     <body style="font-family:Arial; font-size:medium; color:darkblue">
          <h2> Form validation in AngularJS</h2>
          <form ng-app="myApp" ng-controller="myCtrl" name="myForm" ng-submit="submitForm(myForm.$valid)" novalidate>
               <table>
                    <tr>
                         <td>EmpName</td>
                         <td>
                         <input type="text" name="user" ng-model="user" required>
                         <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
                         <span ng-show="myForm.user.$error.required">Username is required.
                         </span>
                         </span>
                         </td>
                    </tr>
                    <tr>
                         <td>EmailID</td>
                         <td>
                         <input type="email" name="email" ng-model="email" required>
                         <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
                         <span ng-show="myForm.email.$error.required">Email is required.
                         </span>
                         <span ng-show="myForm.email.$error.email">Invalid email address.
                         </span>
                         </span>
                         </td>
                    </tr>
                    <tr>
                         <td>Company</td>
                         <td>
                         <input type="text" name="txtCompany" ng-model="Company" required>
                         <span style="color:red"ng-show="myForm.txtCompany.$dirty && myForm.txtCompany.$invalid">
                         <span ng-show="myForm.txtCompany.$error.required">Company name is required.</span>
                         </span>
                         </td>
                    </tr>
                    <tr>
                         <td>Address</td>
                         <td>
                         <input type="text" name="txtAddress" ng-model="Address"required>
                         <span style="color:red" ng-show="myForm.txtAddress.$dirty && myForm.txtAddress.$invalid">
                         <span ng-show="myForm.txtAddress.$error.required">Address is required.</span>
                         </span>
                         </td>
                    </tr>
                    <tr>
                         <td>Salary</td>
                         <td>
                              <input type="text" name="txtSalary" ng-model="Salary" placeholder="Not Compulsory">
                         </td>
                    </tr>
               </table>
               <p>
                    <input type="submit" ng-disabled=" myForm.$invalid" ng-click="submitForm()">
               </p>
          </form>
        <script>
          var app = angular.module('myApp', []);
          app.controller('myCtrl', function ($scope)
          {
               $scope.submitForm = function (isValid)
               {
                    // It will check thet form is completely valid
                    if (isValid)
                    {
                         alert('Data submit successfully');
                    }
               }
          });
        </script>
     </body>
</html>


By executing the above code we will get the output as follows

Output:
form validation

In our form, if the fields are not properly filled, then our form is invalid. In this scenario we can disable the Submit button by using the property ng-disabled=" myForm.$invalid". If the form is properly filled only then the submit button will be enabled. This means that our employee name, company, address input field is required and our email input field requires a valid email.

We have used the code for email validation as:

<span ng-show="myForm.email.$error.email">Invalid email address.</span>

While entering the email in email textbox, you should follow the standard email format otherwise it will give the error message.

There is no need to worry about regular expression of email, because the above written code related to email will automatically handle the email format.

After filling the form when user presses the submit button, the form will show an alert dialog 'Data submit successfully'if all information according to form constraint.

$scope.submitForm = function (isValid)
{
     // It will check thet form is completely valid
     if (isValid)
     {
          alert('Data submit successfully');
     }
}


When user clicks on submit button submitForm function will be called. If form state is valid then it will show an alert dialog.

We have used the following state property of Input fields:
  • $dirty: The field has been modified
  • $invalid: The field content is not valid
  • $valid: The field content is valid
AngularJS is frequently updating the state the input fields.
▲