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.
<head runat="server">
<title></title>
<script src="angular.min.js"></script>
</head>
Step 2Now 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:
<script>
function x($scope) {
$scope.initialname = "Anu";
}
</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:
<body>
<div ng-app>
<form name="form1" ng-controller="x">
<label>Your Name:</label>
<input name="name" ng-model="initialname" ng-minlength="3">
<span style="color:red" ng-show="form1.name.$error.minlength">
Your Name Should Contain Atleast 3 Characters</span>
<br />
<br />
<input type="submit" value="Submit"/>
</form>
</div>
</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 is 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.
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:
<body>
<div ng-app>
<form name="form1" ng-controller="x">
<label>Your Name:</label>
<input name="name" ng-model="initialname" ng-minlength="3" ng-maxlength="20">
<span style="color:red" ng-show="form1.name.$error.minlength">
Your Name Should Contain Atleast 3 Characters</span>
<span style="color:red" ng-show="form1.name.$error.maxlength">
Sorry You are Exceeding the Limit</span>
<br />
<br />
<input type="submit" value="Submit"/>
</form>
</div>
</body>
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.
No comments:
Post a Comment