Angular-Form-Validations
Custom Validations for Angular Forms
Install
Install with npm
$ npm install angular-form-validations --saveInstall with bower
$ bower install angular-form-validations --saveUsage
Include in the application
<script src = 'bower_components/angular-form-validations/dist/angular-form-validations.js'></script>
in app.js
var aap = angular.module('app',['angular-form-validations']);
var callback = {
success:function(scope,element,attribute,errorObj){
//handle the success callback in case the field has no errors
},
failure:function(scope,element,attribute,errorObj){
//handle the error callback in case the field has error(s)
}
}
app.config(['$angularFormValidationProvider',($angularFormValidationProvider)=>{
$angularFormValidationProvider.registerErrorCallbacks(callback);
$angularFormValidationProvider.registerErrorEvents(['keyup']);
}]);
in template.html
<form name='testForm' class="form-horizontal" ng-cloak role="form" form-validation novalidate>
<div class="panel panel-default">
<div class="panel panel-heading">Passwords:</div>
<div class="panel-body">
<div class="col-xs-8">
<label>Password:</label>
<input type='password' class="form-control" name='password' minlength="6"
element-validation ng-model='password' required/>
<label>Confirm Password: </label>
<input type='password' class="form-control" name='confirmPassword' vtype='equal'
match="password"
element-validation ng-model='confirmPassword' required/>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel panel-heading">Matching:</div>
<div class="panel-body">
<div class="col-xs-8">
<label>Sample Number:</label>
<input type='number' class="form-control" name='field1'
element-validation ng-model='field1' required/>
<label>Should be Equal to Sample Number: </label>
<input type='number' class="form-control" name='field2' vtype='equal'
match="field1"
element-validation ng-model='field2' required/>
<label>Should be Greater than Sample Number: </label>
<input type='number' class="form-control" name='field3' vtype='greater'
match="field1"
element-validation ng-model='field3' required/>
<label>Should be Less than Sample Number: </label>
<input type='number' class="form-control" name='field4' vtype='less'
match="field1"
element-validation ng-model='field4' required/>
<label>Should be LessThanEqual than Sample Number: </label>
<input type='number' class="form-control" name='field5' vtype='lessThanEqual'
match="field1"
element-validation ng-model='field5' required/>
<label>Should be GreaterThanEqual than Sample Number: </label>
<input type='number' class="form-control" name='field6' vtype='greaterThanEqual'
match="field1"
element-validation ng-model='field6' required/>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel panel-heading">Strings:</div>
<div class="panel-body">
<div class="col-xs-8">
<label>Text: </label>
<input type='text' class="form-control" name='text' element-validation ng-model='text'
required/>
<label>UserName: </label>
<input type='text' class="form-control" name='username' element-validation
vtype='username' ng-model='username'
required/>
<label>Name(Characters Only): </label>
<input type='text' class="form-control" name='name' element-validation vtype='chars'
ng-model='name'
required/>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel panel-heading">Numbers:</div>
<div class="panel-body">
<div class="col-xs-8">
<label>Positive Number:</label>
<input type='number' class="form-control" name='posNum' vtype='positive'
element-validation ng-model='posNum' required/>
<label>Negative Number:</label>
<input type='number' class="form-control" name='negNum' vtype='negative'
element-validation ng-model='negNum' required/>
<label>Non-Negative Number:</label>
<input type='number' class="form-control" name='nonNegative' vtype='nneg'
element-validation ng-model='nonNegNum' required/>
<label>Non-Positive Number:</label>
<input type='number' class="form-control" name='nonPositive' vtype='npos'
element-validation ng-model='nonPosNum' required/>
<label>Range Number:</label>
<p>min: {{minValue}}</p>
<p>max: {{maxValue}}</p>
<input type='number' class="form-control" name='range' vtype='range'
element-validation
ng-model='rangeNum' min-val="minValue" max-val="maxValue" required/>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel panel-heading">Date:</div>
<div class="panel-body">
<div class="col-xs-8">
<label>Specified Date: </label>
<input type='date' class="form-control" name='specifiedDate' element-validation
ng-model='specifiedDate'/>
<label>Should be Later than Yesterday's Date:</label>
<input type='date' class="form-control" name='date' vtype='current' element-validation
ng-model='date' required/>
<label>Should be Later than Today's Date:</label>
<input type='date' class="form-control" name='tomorrowDate' vtype='next' element-validation
ng-model='tomorrowDate' required/>
<label>Should be later than Specific dDate:</label>
<input type='date' class="form-control" name='specificDate' vtype='specifiedDate' date="specifiedDate" element-validation
ng-model='specificDate' required/>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel panel-heading">Async:</div>
<div class="panel-body">
<div class="col-xs-8">
<label>Async Validations:</label>
<input type='email' class="form-control" name='email' vtype='check' async="true"
element-validation async-callback='validateEmail(value)' ng-model='email' required/>
</div>
</div>
</div>
<button type="submit" ng-click="doSubmit()">Button</button>
</form>
API
FormValidationProvider
.registerErrorCallbacks(callbackObject)
Registers the callback object. When the field is re-validated one of the callbacks get called depending upon if the field is invalidated or validated.
The callback object has two fields :
var callback = {
success:function(scope,element,attribute,errorObj){
//handle the success callback in case the field has no errors
},
failure:function(scope,element,attribute,errorObj){
//handle the error callback in case the field has error(s)
}
}
The callback object needs to be provided in the config state of the module
.registerErrorEvents(events)
Registers the jquery events on which the callbacks need to be triggered.
Events can be passed as a single string jquery event name or an array of such strings.
If nothing is passed then it assumes blur as default event.
.addValidationRules(validationObject)
There are few existing rules present. However, if you want to add few more new rules or override the existing ones, you can pass a configuration in a particular format.
var validationObject = {
type1:{
vtype1: regexObject,
vtype2:function(val,scope,attr){
}
}
}
where type1 is one of the input types
and vtype1 is defined as an attribute in the input element.
Directives
To use the form validation, we need to use FormValidationDirective on the form elements and ElementValidationDirective
Usage of both the directives are required
FormValidationDirective
<form name='testForm' ng-cloak role="form" form-validation-directive novalidate>
ElementValidationDirective
<input type='password' class="form-control" name='confirmPassword' vtype='confirm' match="password"
element-validation-directive ng-model='confirmPassword' required/>
Existing Validations
Numbers
Validation for numeric fields
type ='number' is mandatory
vtype = 'positive'- For fields requiring positive numbers onlyvtype = 'negative'- For fields requiring negative numbers onlyvtype = 'nneg'- For fields requiring non-negative numbers onlyvtype = 'npos'- For fields requiring non-positive numbers onlyvtype = 'range'- For fields requiring a range of numbers only It requiresmin-val='min'andmax-val='max'data binding for giving range for validations. Unordered sub-list
Strings
Validation for numeric fields
type ='text' is mandatory
vtype = 'chars'- For fields requiring characters onlyvtype = 'username'- For fields requiring alphanumeric, . and .
Date
Validation for date fields
type ='date' is mandatory
vtype = 'current'- For model date value to be later than yesterday's datevtype = 'next'- For model date value to be later than today's datevtype = 'specifiedDate'- For model date value to be later than specified date
Telephone
Validation for Telephone fields
Either type ='tel' or type = 'text' and vtype='tel' is mandatory
Formats supported are
555-555-5555
(555)555-5555
(555) 555-5555
555 555 5555
5555555555
1 555 555 5555
Match
Validations in one field with regards to the data in other fields. More so like used in confirm password
vtype = 'equal'- For fields requiring match with another field It requiresmatch='otherModelValue'data binding to validate the field.vtype = 'greater'- For fields requiring values to be greater than another field It requiresmatch='otherModelValue'data binding to validate the field.vtype = 'less'- For fields requiring values to be less than another field It requiresmatch='otherModelValue'data binding to validate the field.vtype = 'greaterThanEqual'- For fields requiring values to be greater than or equal to another field It requiresmatch='otherModelValue'data binding to validate the field.vtype = 'lessThanEqual'- For fields requiring values to be less than or equal to another field It requiresmatch='otherModelValue'data binding to validate the field.
Async
Asynchronous Validations for fields. For example, if one needs to check if email exists in the database
async-callback='callbackForAPIRequests(value): It is a mandatory attribute to be passed in the element. The methodcallbackForAPIRequestsshould be defined in the controller.vtype = '*'- Not a mandatory field in async validations but advisable if you want to determine the element/errorType later on.
Example
Download the .zip file,run a web server on the root folder of the library and hit the following in the web browser. http://localhost:8000/example