AngularJS provides various kinds of validations that can be used in applications, in this article I will show only two types of validations provided by AngularJS, in other words Required Field 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 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 Required Field 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 following manner:
<script>
function x($scope) {
$scope.initialname = "Anu";
}
</script>
Here I have passed an initial value to the scope as "initialname".Step 3
Now we will work on the design part where validation will 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" required>
<span style="color:red" ng-show="form1.name.$error.required">
Please Provide Your name</span>
<br />
<br />
<input type="submit" value="Submit"/>
</form>
</div>
</body>
Here
first you need to add ng-app to the Div tag otherwise 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 the TextBox initial value is also bound using the ng-model.
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.
The first name of the form is provided, then this name of the TextBox is provided, then this $error is used that shows that it will be activated on getting an error and the final word is written as required that shows that it will check whether some value is provided or not.
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 have seen the Required Field Validation, now I will show you how to apply Email Validation using AngularJS.
Step 4
I am adding an initial value for Email; as well, it will be added to the function that was present in the Head Section. So, now your function will look like this:
<script>
function x($scope) {
$scope.initialname = "Anu";
$scope.initialmail = "test@test.com";
}
</script>
Here "initialmail" contains the initial value that will be shown in the TextBox by default.Step 5
After this I had added one more TextBox and Span in the body section that will be working for the Email.
So, now body Section is modified to be:
<body>
<div ng-app>
<form name="form1" ng-controller="x">
<label>Your Name:</label>
<input name="name" ng-model="initialname" required>
<span style="color:red" ng-show="form1.name.$error.required">
Please Provide Your name</span>
<br />
<br />
<label>Your Email: </label>
<input type="email" name="email" ng-model="initialmail">
<span style="color:red" ng-show="form1.email.$error.email">
Please Provide valid EmailID</span>
<br />
<br />
<input type="submit" value="Submit"/>
</form>
</div>
</body>
You can see that everything is similar except that in the Span the email is written instead of required.Our application is ready to be executed.
Output
On running the application you will see that the initial value is shown in both of the Textboxes.
No comments:
Post a Comment