In This Article,
I Would Like To Know You About How To Clear The Controls Data, Actually There
Are Three Ways To Clear The Input Controls / Fields Data.
One Is By
Clearing Only The ng-model data i.e., By Using This, If The Validation Of
Required Is There For Form i.e., Required Form Validation Is There, Then The
Error Message Will Display, So This Is Bad Scenario For Forms Having Validation.
Second Way Is By
Reloading The Page, By Using This All The Page Will Be Reloaded And All The
Data In The Input Controls Will Clear And All The Validations Will Set As
Initial Stage Of The Form. And Also If The Page Have To Get The Data From DB,
Then Number Of DB Hits Wills Increase For Every Reload, Then Every
Time Unnecessary DB Hits Will Effect The Performance Of The Application. So
This is Also A Bad Scenario Some Times.
Third Way Is By
Setting The Pristine And Untouchable And Clearing The ng-model Data, This Won’t
Effect Any DB Hits And No Page Refreshes And Page Looks As Initial Stage. This
Scenario Is Good For Developers To Clear The Input Controls To Avoid
Unnecessary Things.
For Form Validation Click FormValidation In AngularJS
The Below Code Shows The Clear The
Form Data From Form Input Controls
Index.html
<!DOCTYPE html>
<html ng-app="angularclearinputcontrols">
<head>
<meta charset="utf-8" />
<title>AngularJS
- Clear Input Controls</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-messages.js"></script>
<script src="index.js"></script>
<style>
input.ng-invalid {
background-color: lightpink;
}
input.ng-valid {
background-color: lightgreen;
}
</style>
</head>
<body ng-controller="ClearInputControlsController">
<form name="formvalidation" novalidate>
<div class="container">
<div class="col-sm-8 col-sm-offset-2">
<!--
Page Header -->
<div class="page-header"><h1>AngularJS - Clear Input Controls In
Different Ways</h1></div>
<div class="form-group" ng-class="{ 'has-error' : formvalidation.name.$invalid }">
<label>Name</label>
<input type="text" name="name" class="form-control" ng-model="FormInfo.Name" ng-pattern="/^[a-zA-Z]*$/" ng-minlength="4" ng-maxlength="10" required>
<div style="color:red;" ng-messages="formvalidation.name.$error" ng-if="formvalidation.name.$touched || submitted">
<p ng-message="maxlength">Name Should Contain Maximum 10
Characters</p>
<p ng-message="maxlength">Name Should Contain Minimum 3
Characters</p>
<p ng-message="pattern">Name Should Contain Only Letters</p>
<p ng-message="required">Name Is Required</p>
</div>
</div>
<!--
Mobile Number -->
<div class="form-group" ng-class="{ 'has-error' : formvalidation.phonenumber.$invalid }">
<label>Mobile Number</label>
<input type="text" name="phonenumber" class="form-control" ng-model="FormInfo.PhoneNumber" maxlength="10" ng-pattern="/(7|8|9)\d{9}/" required>
<div style="color:red;" ng-messages="formvalidation.phonenumber.$error" ng-if="formvalidation.phonenumber.$touched || submitted">
<p ng-message="pattern">Invalid Mobile Number, Should Start
With 7 or 8 or 9</p>
<p ng-message="required">Phone Number Is Required</p>
</div>
</div>
<!--
PAN Number -->
<div class="form-group" ng-class="{ 'has-error' : formvalidation.pannumber.$invalid }">
<label>PAN Number</label>
<input type="text" name="pannumber" class="form-control" ng-model="FormInfo.PANNumber" maxlength="10" style="text-transform: uppercase" ng-pattern="/^([a-zA-Z]){5}([0-9]){4}([a-zA-Z]){1}?$/" required>
<div style="color:red;" ng-messages="formvalidation.pannumber.$error" ng-if="formvalidation.pannumber.$touched || submitted">
<p ng-message="pattern" ">Invalid PAN Number</p>
<p ng-message="required">PAN Number Is Required</p>
</div>
<!-- Email -->
<div class="form-group" ng-class="{'has-error':
formvalidation.email.$invalid}">
<label>Email</label>
<input type="email" name="email" class="form-control" ng-model="FormInfo.Email" style="text-transform: lowercase" ng-pattern="/^.+@.+\..+$/" required>
<div style="color:red;" ng-messages="formvalidation.email.$error" ng-if="formvalidation.email.$touched || submitted">
<p ng-message="required">Email Is Required</p>
<p ng-message="pattern">Invalid Email</p>
</div>
</div>
<div class="form-group" ng-class="{'has-error':
formvalidation.checkbox.$invalid}">
<input type="checkbox" name="checkbox" ng-model="FormInfo.CheckBox" required>
<label>Terms And Conditions</label>
<div style="color:red;" ng-messages="formvalidation.checkbox.$error" ng-if="formvalidation.checkbox.$touched || submitted">
<p ng-message="required">Select Checkbox Is Required</p>
</div>
</div>
<!-- Submit Button -->
<div class="form-group">
<button type="submit" class="btn
btn-primary" ng-click="SubmitForm()">Submit</button>
<button type="button" class="btn
btn-danger" ng-click="ClearDataInInputControls()">Clear Data</button>
<button type="button" class="btn
btn-danger" ng-click="ClearByReload()">Clear By Reload</button>
<button type="button" class="btn
btn-danger" ng-click="ClearByReset()">Clear By Reset</button>
</div>
</div>
</div>
</form>
</body>
</html>
Index.js
var app = angular.module('angularclearinputcontrols', ['ngMessages']);
app.controller('ClearInputControlsController', function ($scope, $window) {
$scope.SubmitForm = function () {
if ($scope.formvalidation.$valid) {
$scope.submitted = false;
alert("Submitted!!");
}
else {
//if
$scope.formvalidation.$valid is not true then it submitted= true i.e., the
submitted attribute should work
$scope.submitted = true;
}
}
$scope.ClearDataInInputControls = function () {
$scope.FormInfo = {};
}
$scope.ClearByReload = function () {
$window.location.reload();
}
$scope.ClearByReset = function () {
$scope.formvalidation.$setPristine();
// it sets the form to pristine
$scope.formvalidation.$setUntouched(); // it sets the form to untouched
//
$scope.formvalidation.$submitted = false;
// we can use this in place of $scope.submitted
$scope.submitted = false;
$scope.FormInfo = {}; // Clear the ng-model object that holds the ng-model value
}
});
Output:-
When We Click On Submit Button Without Entering Any Data In The Form Input Controls
After Entered Data, It Shows As Below:
Now, After Clicking On Clear Data Button, It Can Clear Data But It Shows Error Messages, As The Form Is In The State Of Validation. The Below Show The Exact :
Now Again Enter Data
Now Click On Clear By Reset Button, It Will Reset The Form Input Controls Without Any Reload As Below Shown:
No comments:
Post a Comment
Note: only a member of this blog may post a comment.