Introduction
This article focuses on adding the validation on form elements. This article will cover the basic validations in AngularJS and in coming posts i will try to cover the custom validation and dynamic validations.
Approach
Lets discuss some basic form validations in AngularJS -
Below is the Angular application structure -
Here one controller - "validationController.js" is added just one HTML page - "index.html" is added for adding the form controls.
Below is the content of "index.html" -
Validations will be done whenever the controls are changed ($dirty) and the value is invalid. ($invalid).
So suppose if you want the validations to be fired irrespective of "$dirty" flag or on the click "Save" button then we can add some tweak to the existing HTML like below -
To the existing button control add the ng-click event to make the "submitted" to true. And existing validations can be modified like below -
So do the above changes in all the places wherever it is required. This line code to check whether directly "Save" button is clicked or else follow the same validations rules.
After adding this line of code this is how our page shows -
Plunkr Demo - http://plnkr.co/edit/GHZ4sflo7IV7ynLf1wNS?p=preview
Hope this helps.
This article focuses on adding the validation on form elements. This article will cover the basic validations in AngularJS and in coming posts i will try to cover the custom validation and dynamic validations.
Approach
Lets discuss some basic form validations in AngularJS -
Below is the Angular application structure -
Here one controller - "validationController.js" is added just one HTML page - "index.html" is added for adding the form controls.
Below is the content of "index.html" -
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS Validations</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body ng-controller="validationCtrl">
<script src="scripts/angular.min.js"></script>
<script src="app.js"></script>
<script src="controllers/validationController.js"></script>
<form name="validationForm" novalidate class="form-horizontal" ng-submit="validationViewModel.submit()">
<!-- Text Validation-->
<div class="form-group">
<label class="col-lg-2 control-label">Name</label>
<div class="col-sm-2">
<input type="text" class="form-control" ng-model="validationViewModel.Name" placeholder="Enter Name" name="Name"
required
ng-maxlength="10"
ng-minlength="5" />
</div>
<div class="help-block" style="color:red" ng-messages="Name.$error"
ng-show="validationForm.Name.$dirty && validationForm.Name.$invalid">
<span ng-show="validationForm.Name.$error.required">Enter Name.</span>
<span ng-show="validationForm.Name.$error.maxlength">Maximum limit reached.</span>
<span ng-show="validationForm.Name.$error.minlength">Enter Minimum length.</span>
</div>
</div>
<!-- Email Validation-->
<div class="form-group">
<label class="col-lg-2 control-label">Email</label>
<div class="col-sm-2">
<input type="email" class="form-control" ng-model="validationViewModel.Email" placeholder="Enter Email" name="Email"
required />
</div>
<div class="help-block" style="color:red" ng-messages="Email.$error"
ng-show="validationForm.Email.$dirty && validationForm.Email.$invalid">
<span ng-show="validationForm.Email.$error.required">Enter Email.</span>
<span ng-show="validationForm.Email.$error.email">Enter Valid Email.</span>
</div>
</div>
<!-- RadioButton Validation-->
<div class="form-group">
<label class="col-lg-2 control-label">Gender</label>
<div class="col-sm-2">
<input type="radio" class="form-control" ng-model="validationViewModel.Gender" placeholder="Select Gender" value="male"
name="Gender"
required />
<input type="radio" class="form-control" ng-model="validationViewModel.Gender" placeholder="Select Gender" value="female"
name="Gender"
required />
</div>
<div class="help-block" style="color:red" ng-messages="Gender.$error"
ng-show="validationForm.Gender.$dirty && validationForm.Gender.$invalid">
<span ng-show="validationForm.Gender.$error.required">Select Gender.</span>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-sm-8">
<button type="submit" class="btn btn-primary" ng-click="submitted=true">Save</button>
</div>
</div>
</form>
</body>
</html>
);
As shown above there are 3 types of validations - "Text, "Email" and "Radio button" validations.Validations will be done whenever the controls are changed ($dirty) and the value is invalid. ($invalid).
So suppose if you want the validations to be fired irrespective of "$dirty" flag or on the click "Save" button then we can add some tweak to the existing HTML like below -
<div class="form-group">
<div class="col-lg-offset-2 col-sm-8">
<button type="submit" class="btn btn-primary" ng-click="submitted=true">Save</button>
</div>
</div>
To the existing button control add the ng-click event to make the "submitted" to true. And existing validations can be modified like below -
ng-show="submitted || (validationForm.Email.$dirty && validationForm.Email.$invalid)">
So do the above changes in all the places wherever it is required. This line code to check whether directly "Save" button is clicked or else follow the same validations rules.
After adding this line of code this is how our page shows -
Plunkr Demo - http://plnkr.co/edit/GHZ4sflo7IV7ynLf1wNS?p=preview
Hope this helps.
No comments:
Post a Comment
Comments Section