Introduction
In this article, we will demonstration how to validate inputs in AngularJS, AngularJS provides states of form and input fields, which are can be used to show validation messages.
Getting Started
AngularJS provided client-side form validation, where we can apply validation before sending request to server. AngularJS provides some properties which represents state of form and input fields. For example, AngularJS provides $touched state to know whether input field has touched or not.
AngularJS remembers each and every state of form and input fields and immediately notifies to view, if state changes. For example, lets discuss about $touched state when form loads first time and you have not touched any field then by default its value is false and when touched it becomes true.
Using AngularJS form and input states you can display validation messages in the form and you can restricts as well. For example
<span ng-show="schoolForm.ShortName.$touched && schoolForm.ShortName.$error.required"> Enter short name.</span><
Above example display field required message when field $error.required becomes true, if you try to submit form without entering any value in the name field.
Example of accessing state properties
<FormName>.<AngularProperty>
<FormName>.<InputFieldName>.<AngularProperty>
Below is the list of state that form have
- $pristine:No fields have been modified yet
- $dirty:One or more have been modified
- $invalid:the form content is not valid
- $valid:the form content is valid
- $submittedthe form is submitted
Below is the list of state that input field have
- $touched:1.The field has been touched
- $pristine:The field has not been modified yet
- $dirty:The field has been modified
- $invalid:4.The field content is not valid
- $valid:The field content is valid
AngularJS provides basic implementation for most common HTML5 input types as well as some directives for validation. AngularJS provides below directives for form validation
| Param | Type | Details |
|---|---|---|
| ngModel | string | Assignable AngularJS expression to data-bind to. |
| name (optional) | string | Property name of the form under which the control is published. |
| required (optional) | string | Sets required validation error key if the value is not entered. |
| ngRequired (optional) | boolean | Sets required attribute if set to true |
| ngMinlength(optional) | number | Sets minlength validation error key if the value is shorter than minlength. |
| ngMaxlength (optional) | number | Sets maxlength validation error key if the value is longer than maxlength. Setting the attribute to a negative or non-numeric value, allows view values of any length. |
| ngPattern (optional) | string | Sets pattern validation error key if the ngModel $viewValue value does not match a RegExp found by evaluating the AngularJS expression given in the attribute value. If the expression evaluates to a RegExp object, then this is used directly. If the expression evaluates to a string, then it will be converted to a RegExp after wrapping it in ^ and $ characters. For instance, "abc" will be converted to new RegExp('^abc$'). Note: Avoid using the g flag on the RegExp, as it will cause each successive search to start at the index of the last search's match, thus not taking the whole input value into account. |
| ngChange (optional) | string | AngularJS expression to be executed when input changes due to user interaction with the input element. |
| ngTrim (optional) | boolean | If set to false AngularJS will not automatically trim the input. This parameter is ignored for input[type=password] controls, which will never trim the input.(default: true) |
Go through with the below example, to get more ideas for implementation form validation in AngularJS.
Example:
This example demonstrates to create and update school details, this example implements form validation and if form is valid then form allows user to submit details.
Module
//declare module
var schoolapp=angular.module("schoolapp",[]);
schoolapp.controller("schoolcont",function($scope,$http){
$scope.school={Code:0,ID:0,Name:'',ShortName:'',URL:''};
$scope.school.Name="Kailash";
$scope.schools=[];
$scope.getschool=function(){
$http.get("https://www.google.co.in/")
.then(function(response) {
alert(response.status);
$scope.students = response.data;
}
,function errorCallback(response){
alert('Error Code:'+response.status+',Message:'+response.statusText);
});
}
//function for adding or updating school details
$scope.updateschool=function(){
$http.get("https://www.sms/updateschool")
.then(function(response) {
alert(response.status);
$scope.pg = response.data;
}
,function errorCallback(response){
alert('Error Code:'+response.status+',Message:'+response.statusText);
});
}
//function for clear input values
$scope.clear=function()
{
$scope.school.Code=0;
$scope.school.ID=0;
$scope.school.Name="";
$scope.school.ShortName="";
$scope.school.URL="";
}
});
<HTML ng-app = "schoolapp">
<HEAD>
<TITLE>AngularJS: School Window</TITLE>
<script src="E:\Projects\SchoolManagement\UI\Common\System\angular.min.js"></script>
<script src="E:\Projects\SchoolManagement\UI\Modules\SchoolModule.js"></script>
</HEAD>
<BODY ng-controller="schoolcont">
<form name="schoolForm" novalidate>
<P>
<TABLE>
<TR>
<TD>Name:</TD>
<TD>
<INPUT TYPE="txt" name="Name" ng-model="school.Name" required/>
<br />
<span ng-show="schoolForm.Name.$touched && schoolForm.Name.$error.required">Enter school name.</span>
</TD>
</TR>
<TR>
<TD>Short Name:</TD>
<TD>
<INPUT TYPE="txt" name="ShortName" ng-model="school.ShortName" required/> <br />
<span ng-show="schoolForm.ShortName.$touched && schoolForm.ShortName.$error.required"> Enter short name.</span></TD>
</TR>
<TR>
<TD>URL:</TD>
<TD><INPUT TYPE="txt" name="url" ng-model="school.URL" required/>
<br />
<span ng-show="schoolForm.url.$touched && schoolForm.url.$error.required">URL is required.</span></TD>
</TD>
</TR>
<TR>
<TD>
</TD>
<TD>
<button type="submit" ng-click="updateschool()" ng-disabled="schoolForm.$invalid" >Save</button>
<button type="submit" ng-click="updateschool()" ng-disabled="schoolForm.$invalid" >Save &Next</button>
<button ng-click="clear()">Clear</button>
</TD>
</TR>
</TABLE>
</form>
<HR/>
<table border="1">
<tr>
<th>ID</th>
<TD>Name:</TD>
<TD>Short Name:</TD>
<TD>URL:</TD>
<th>Action</th>
</tr>
<tr ng-repeat="school in schools | filter:searchText">
<td>{{schools.ID}}</td>
<td>{{schools.Name}}</td>
<td>{{schools.ShortName}}</td>
<td>{{schools.URL}}</td>
<TD>
<button ng-click="edit(school)">Edit</button>
<button ng-click="delete(school)">Delete</button>
</TD>
</tr>
</table>
</P>
</BODY>
</HTML>
Summary
Hope this article, helps you to get idea about AngularJS client side form validation. Happy coding and enjoy.
Thanks
Kailash Chandra Behera
No comments:
Post a Comment