In This Article I Would Like To Know
You About The Form Properties
AngularJS Monitors The Information Of
The Input Fields Through The HTML5 Attributes/Properties Of The Form.
There Are Different Types Of Form
Properties
ng-invalid : it checks the condition with the directives and if it is not satisfied
with criteria - it is invalid
i.e., formname.fieldname.$invalid = true;
ng-valid : it checks the condition with the directives and if it is satisfied with
criteria - it is valid
i.e., formname.fieldname.$valid = true;
ng-pristine : pristine means the state after page is load which is not any keypress
happened in the input field after page load
i.e., formname.fieldname.$pristine = true;
ng-dirty : dirty means atleast one key press have to be done
i.e., formname.fieldname.$dirty = true;
ng-untouched : untouched means before the control enters the input field And
touched means after the control enters the input field
i.e., formname.fieldname.$untouched = true;
ng-touched : touched means after the control enters the input field
i.e., formname.fieldname.$touched = true;
index.html
<!DOCTYPE html>
<html ng-app="angularformproperties">
<head>
<meta charset="utf-8" />
<title>AngularJS
- Form Validation</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="index.js"></script>
<style>
input[name=invalidvalid].ng-invalid {
background-color: lightpink;
}
input[name=invalidvalid].ng-valid {
background-color: lightgreen;
}
input[name=pristinedirty].ng-pristine {
background-color: lightpink;
}
input[name=pristinedirty].ng-pristine {
background-color: lightpink;
}
input[name=pristinedirty].ng-dirty {
background-color: lightblue;
}
input[name=untouchedtouched].ng-untouched {
background-color: lightpink;
}
input[name=untouchedtouched].ng-touched {
background-color: lightseagreen;
}
</style>
</head>
<body ng-controller="FormPropertiesController">
<form name="formvalidation" novalidate>
<div class="container">
<div class="col-sm-8 col-sm-offset-2">
<!--
Page Header -->
<div class="page-header"><h1>AngularJS - Form Properties</h1></div>
<div class="row">
<div class="form-group" ng-class="{ 'has-error' : formvalidation.invalidvalid.$invalid }">
<label>ng-invalid & ng-valid</label>
<!-- invalid means it checks the condition with the
directives and if it is not satisfied with criteria - it is invalid and
if it meets the
criteria - it is valid which means valid -->
<input type="text" name="invalidvalid" class="form-control" ng-model="Info.Name" ng-pattern="/^[a-zA-Z]*$/" ng-minlength="4" ng-maxlength="10" required>
<p style="color:red" ng-show="formvalidation.invalidvalid.$error.maxlength && !formvalidation.invalidvalid.$error.pattern">Name Should Contain Maximum 10
Characters</p>
<p style="color:red" ng-show="formvalidation.invalidvalid.$error.minlength && !formvalidation.invalidvalid.$error.pattern">Name Should Contain Minimum 3
Characters</p>
<p style="color:red" ng-show="formvalidation.invalidvalid.$error.pattern">Name Should Contain Only Letters</p>
</div>
</div>
<div class="row">
<div class="form-group" ng-class="{ 'has-error' : formvalidation.pristinedirty.$invalid }">
<label>ng-pristine & ng-dirty</label>
<!-- pristine means the state after page is load which is not
any keypress happened in the inpout field after page load And
dirty means atleast
one key press have to be done -->
<input type="text" name="pristinedirty" class="form-control" ng-model="Info.PANNumber" >
</div>
</div>
<div class="row">
<div class="form-group" ng-class="{ 'has-error' : formvalidation.untouchedtouched.$invalid }">
<label>ng-untouched & ng-touched</label>
<!-- untouched means before the control enters the input
field And touched means after the control enters the input field -->
<input type="text" name="untouchedtouched" class="form-control" ng-model="Info.PhoneNumber">
</div>
</div>
</div>
</div>
</form>
</body>
</html>
index.js
var app = angular.module('angularformproperties', []);
app.controller('FormPropertiesController', function ($scope, $window) {
});
Output:-
After Page Loads It Looks As Below. The Below Form Shows Three
Input Fields, Which Are ng-valid & invalid, ng-pristine & ng-dirty And
ng-untouched & ng-touched.
The States That The Three Input Fields Are Displaying After
Loading The Page Is
ng-invalid,
ng-pristine,
ng-untouched Respectively.
In The First Field If We Typed, It Checks The Validations With Directives
Of The Input Field,
If It
Does Not Match Criteria, It Displays Error Message.
In The Second Field, When We Type Any Key From The Keyboard, Then Pristine State Will Be False And Dirty State Will Be True.
In The Third Field, Just The Cursor Should Go Out From The Field, Then Untouched State Will Be False And Touched Will Be True.
The Below Displays As What I Said :
The First Field
If We Type, What Exactly Matches The Criteria , Then Invalid State Will Be
False And Valid Will Be True As Below :
No comments:
Post a Comment
Note: only a member of this blog may post a comment.