Post
Ask Question

Minimunm Length and Maximum Length Validation Using AngularJS

Introduction

 
In my previous article l told you about Required Field and Email Validation Using AngularJS.
 
In this article, I will tell you about Min Length and Max Length Validation using AngularJS.
 
AngularJS provides many kinds of validations that can be used in our applications, in this article I will show only two types of validations provided by AngularJS, in other words, Required Field Validation and Email Validation.
 
Let's see the procedure to apply validations using AngularJS.
 
Step 1
 
First of all, you need to download the AngularJS external file that can be done either from the jQuery official website or you can also download the source code that I have provided at the top of this article.
 
You can also download it from this link: ANGULARJS
 
After downloading the file you need to add it in the Head Section of your application.
  1. <head runat="server">  
  2.     <title></title>  
  3.     <script src="angular.min.js"></script>  
  4. </head> 
Step 2
 
Now I will first show how to implement Min Length Validation using AngularJS.
 
First we will create a function in which one initial value will be passed that will be shown by default whenever the user visits the page.
 
This function can be created in the following manner:
  1. <script>  
  2.         function x($scope) {  
  3.             $scope.initialname = "Anu";  
  4.         }  
  5. </script> 
Here I had passed an initial value to the scope as "initialname".
 
Step 3
 
Now we will work on the design part where the validation is to be applied.
 
Write this code in the body section of your web page:
  1. <body>  
  2.     <div ng-app>  
  3.     <form name="form1" ng-controller="x">  
  4.         <label>Your Name:</label>  
  5.         <input name="name" ng-model="initialname" ng-minlength="3">  
  6.         <span style="color:red" ng-show="form1.name.$error.minlength">  
  7.         Your Name Should Contain Atleast 3 Characters</span>  
  8.         <br />  
  9.         <br />  
  10.         <input type="submit" value="Submit"/>  
  11.     </form>  
  12.     </div>  
  13. </body> 
Here first you need to add ng-app to the Div tag otherwise the validations will not work properly. Then a name is provided to the form and the function name is passed in the ng-controller of the form.
 
Then a TextBox is created to which again a name is provided, in this TextBox an initial value is also bound using ng-model, then you can see that I have provided the minimum length as ng-minlength="3" this means that if the user enters a value consisting of less than 3 characters then an error message will be shown.
 
Then a span is created in which ng-show is used, in this ng-show an error message is provided that will be activated when the user does not provide a value in the TextBox.
 
This error message is provided in the following manner:
 
First the name of the form is provided, then the name of the TextBox is provided, then $error is used that shows that it will be activated on getting an error and the final word is written as minlength that shows that it will check whether the user has provided a name consisting of less than 3 letters, if the name contains less than 3 letters then the error will be shown.
 
At the end I took a button.
 
Now our application is created and is ready to be executed.
 
Output
 
On running the application you will see that the initial value is shown in the TextBox.
 
validations in AngularJS

But as I make changes in this initial value and remove a letter you can see that an error message is shown that your name should contain at least 3 letters.
 
validations in AngularJS

Now If I provide my complete name than the error is gone.
 
validations in AngularJS

Until now you saw the MinLength Validation. I will now show you how to apply MaxLength Validation using AngularJS.
 
Step 4
 
For this you need to go to the body section and make changes in the TextBox that was already created, you just need to Add "ng-maxlength="20" and maxlength validation will be applied, so now your code will look like:
  1. <body>  
  2.     <div ng-app>  
  3.     <form name="form1" ng-controller="x">  
  4.         <label>Your Name:</label>  
  5.         <input name="name" ng-model="initialname" ng-minlength="3" ng-maxlength="20">  
  6.         <span style="color:red" ng-show="form1.name.$error.minlength">  
  7.         Your Name Should Contain Atleast 3 Characters</span>  
  8.         <span style="color:red" ng-show="form1.name.$error.maxlength">  
  9.         Sorry You are Exceeding the Limit</span>  
  10.         <br />  
  11.         <br />  
  12.         <input type="submit" value="Submit"/>  
  13.     </form>  
  14.     </div>  
  15. </body> 
In the TextBox you can see that I had added ng-maxlength="20", but I had added one more span in which an error message for the max length will be shown.
 
Now our application is ready to be executed.
 
Output
 
On running the application you will see that the initial value is shown in the TextBox.
 
validations in AngularJS

But as I make changes in this initial value and provide a name consisting of more letters then you will see the error message shown that your have exceeded the limit.
 


Similar Articles