Introduction
In my previous article l told you about:
In this article I will tell you about Custom Validation using AngularJS.
AngularJS provides various validations that can be used in our applications, in this article I will show only Custom Validations provided by AngularJS.
Let's see the procedure required to apply validations using AngularJS.
Step 1
First of all you need to download the AngularJS external file. That can be done either in the jQuery official website or you can download the Source Code that I have provided at the top of this article.
You can also download it from here:
ANGULARJS After downloading the file you need to add it to the Head Section of your application.
<head id="Head1" runat="server">
<title></title>
<script src="angular.min.js"></script>
</head>
Step 2
First we will create a function in which one initial value will be passed to be shown by default whenever the user visits the page. Also a pattern will be provided to be matched when inserting the value into the TextBox.
This function can be created in the following manner:
<head id="Head1" runat="server">
<title></title>
<script src="angular.min.js"></script>
<script>
function x($scope) {
$scope.initialname = "123";
$scope.pattern = /^\d*$/;
}
</script>
</head>
Here I have passed an initial value to the scope as "initialname".
The pattern is passed using the "pattern" in the scope, here the pattern will ensure that only Integers are entered in the TextBox.
Step 3
Now we will work on the design part where the 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" ng-pattern="pattern">
<span style="color:red" ng-show="form1.name.$error.pattern">
Please Insert Numbers Which Should be Positive</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 TextBox an initial value is bound using the ng-model and the pattern is bound using the ng-pattern.
Then a span is created in which ng-show is used, in this ng-show an error message is provided which will be activated when the user does not provide a valid number 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 this $error is used that shows that it will be activated on getting an error and the final word is written as a pattern showing that it will check whether the user has provided a valid number or not, if the number is negative or not a number than an error will be shown.
Finally I used a button.
The complete code of this application is as follows:
<html ng-app xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="angular.min.js"></script>
<script>
function x($scope) {
$scope.initialname = "123";
$scope.pattern = /^\d*$/;
}
</script>
</head>
<body>
<div ng-app>
<form name="form1" ng-controller="x">
<label>Your Name:</label>
<input name="name" ng-model="initialname" ng-pattern="pattern">
<span style="color:red" ng-show="form1.name.$error.pattern">
Please Insert Numbers Which Should be Positive</span>
<br />
<br />
<input type="submit" value="Submit"/>
</form>
</div>
</body>
</html>
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.
![Validation Using AngularJS]()
Now if I enter some letters into this TextBox then you will see that the error message will be shown immediately.
![Validation Using AngularJS]()
Also if I provide a negative integer than also the error message will be shown.
![Validation Using AngularJS]()