Hi friend
today you are reading angular js validation
Validation: -
Angular js
allow us to make their own custom validation directive where we can check email
id compare password & binding dropdown list.It have some
properties which shown us error after the form validation.
It is given
below:-
$valid: - $valid
is a Boolean property that tell us what you insert in form it valid or not. It
check all forms controls are valid than shows true otherwise false.
$invalid: -$invalid
is Boolean property that tell us that what you enter in form is invalid or not
If form input is valid it disappear or not valid it shows error user’s
$pristine: -$pristine
tell us about that for or its input are unmodified by user or not
$dirty: -It is
Boolean property that’s just opposite of $pristine it tells that form modify by
user or not
$error: - This is an object hash which
contains references to all invalid controls or forms.
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Registration</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<script>
var app = angular.module("app", []);
app.directive("ngCompare", function () {
return {
require: 'ngModel',
link: function (scope, currentEl,
attrs, ctrl) {
var compareField =
document.getElementsByName(attrs.ngCompare)[0];
var compareEl =
angular.element(compareField);
currentEl.on("keyup", function () {
var isMatch = compareEl.val()
=== currentEl.val();
ctrl.$setValidity('compare', isMatch);
scope.$digest();
});
compareEl.on("keyup", function () {
var isMatch = compareEl.val() === currentEl.val();
ctrl.$setValidity('compare', isMatch);
scope.$digest();
});
}
}
});
app.controller("ctrl", function ($scope) {
$scope.IsSubmit = false;
$scope.CountryList = [
{
id: 1,
name: "India"
},
{
id: 2,
name: "America"
}];
$scope.CityList = [];
$scope.$watch("user.Country", function (newVal, oldVal) {
console.log(newVal);
if (newVal == 1) {
$scope.CityList = [
{
id: 1,
name: "Noida"
},
{
id: 2,
name: "Delhi"
},
{
id: 3,
name: "Allahabad"
},
{
id: 4,
name: "Varanasi"
}];
}
elseif(newVal == 2)
{
$scope.CityList = [
{
id: 5,
name: "Kaliforniya"
},
{
id: 6,
name: "newjurcy"
},
{
id: 7,
name: "washington"
},
{
id: 8,
name: "newyork"
}];
}
});
$scope.SaveData = function () {
$scope.IsSubmit = true;
if ($scope.UserForm.$valid) {
alert("Form is Valid!");
}
else {
alert("Form is Invalid!");
}
}
});
</script>
</head>
<body class="container" ng-controller="ctrl">
<h2>User SignUp</h2>
<form name="UserForm" ng-submit="SaveData(user)" class="form-horizontal" novalidate>
<div class="form-group">
<label class="col-md-4">
Username:
</label>
<div class="col-md-8">
<input type="text" name="Username" ng-model="user.Username" ng-required="true" class="form-control" ng-minlength="3" ng-maxlength="10" />
<p class="text-danger" ng-show="UserForm.Username.$error.required&&
(IsSubmit || UserForm.Username.$dirty)">
Please Enter Username:
</p>
<p class="text-danger" ng-show="UserForm.Username.$error.minlength&&
(IsSubmit || UserForm.Username.$dirty)">
*Username must has atleast
three characters
</p>
<p class="text-danger" ng-show="UserForm.Username.$error.maxlength&&
(IsSubmit || UserForm.Username.$dirty)">
*Username cannot has more
than 10 characters
</p>
</div>
</div>
<div class="form-group">
<label class="col-md-4">
Full Name:
</label>
<div class="col-md-8">
<input type="text" name="Fullname" ng-model="user.Fullname" ng-required="true" class="form-control" />
<p class="text-danger" ng-show="UserForm.Fullname.$error.required&&
(IsSubmit || UserForm.Fullname.$dirty)">
*Please Enter Fullname
</p>
</div>
</div>
<div class="form-group">
<label class="col-md-4">
Password:
</label>
<div class="col-md-8">
<input type="password" name="Password" ng-model="user.Password" ng-required="true" class="form-control" />
<p class="text-danger" ng-show="UserForm.Password.$error.required&&
(IsSubmit || UserForm.Password.$dirty)">
*Please Enter Password
</p>
</div>
</div>
<div class="form-group">
<label class="col-md-4">
Confirm Password:
</label>
<div class="col-md-8">
<input type="password" name="ConfirmPassword" ng-model="user.ConfirmPassword" ng-required="true" class="form-control" ng-compare="Password" />
<p class="text-danger" ng-show="UserForm.ConfirmPassword.$error.required&&
(IsSubmit || UserForm.ConfirmPassword.$dirty)">
*Please Enter
ConfirmPassword
</p>
<p class="text-danger" ng-show="UserForm.ConfirmPassword.$error.compare&&
(IsSubmit || UserForm.ConfirmPassword.$dirty)">
**Confirm Password Doesn't
match
</p>
</div>
</div>
<div class="form-group">
<label class="col-md-4">
Email
</label>
<div class="col-md-8">
<input type="email" name="Email" ng-model="user.Email" ng-required="true" class="form-control" />
<p class="text-danger" ng-show="UserForm.Email.$error.required&& (IsSubmit
|| UserForm.Email.$dirty)">
*Please Enter Email
</p>
<p class="text-danger" ng-show="UserForm.Email.$error.email&& (IsSubmit ||
UserForm.Email.$dirty)">
**Please Enter Correct
Email
</p>
</div>
</div>
<div class="form-group">
<label class="col-md-4">
Mobile No:
</label>
<div class="col-md-8">
<input type="number" name="Mobile" ng-model="user.Mobile" ng-required="true" class="form-control" />
<p class="text-danger" ng-show="UserForm.Mobile.$error.required&& (IsSubmit
|| UserForm.Mobile.$dirty)">
*Please Enter Mobile no.
</p>
<p class="text-danger" ng-show="UserForm.Mobile.$error.number&& (IsSubmit
|| UserForm.Mobile.$dirty)">
**Please Enter Numbers Only
</p>
</div>
</div>
<div class="form-group">
<label class="col-md-4">
Country:
</label>
<div class="col-md-8">
<select name="Country" ng-model="user.Country" ng-options="country.id as
country.name for country in CountryList" ng-required="true" class="form-control">
<option value="">
Select
</option>
</select>
<p class="text-danger" ng-show="UserForm.Country.$error.required&&
(IsSubmit || UserForm.Country.$dirty)">
*Please Select Country
</p>
</div>
</div>
<div class="form-group">
<label class="col-md-4">
City:
</label>
<div class="col-md-8">
<select name="City" ng-model="user.City" ng-options="city.name for
city in CityList" ng-required="true" class="form-control">
<option value="">
Select
</option>
</select>
<p class="text-danger" ng-show="UserForm.City.$error.required&& (IsSubmit
|| UserForm.City.$dirty)">
*Please Select Country
</p>
</div>
</div>
<div class="form-group">
<label class="col-md-4">
</label>
<div class="col-md-8">
<input type="submit" value="SignUp" class="btnbtn-primary" ng-disabled="UserForm.$invalid" />
</div>
</div>
</form>
</body>
</html>
Out
Put:-
Hi friend
now we are reading $watch $digest and $apply Whose used in observe changed variable on the $scope.
$watch: - $watch can be used to
watch any value by expression or by Function called trigger that can be changed
in value or by Function called when that value changes. Both are different. It accepts three expression variable name, listener & obj
values. In watch listener & obj values are optional.it called by $scope.
$watch
Syntax by expression: - $scope. $watch ('variableName',
listener, function (new Value, old Value));
Syntax by function: - $scope. $watch (function () {
Return
$scope
}, function
(new Value, old Value);
});
Note: - its Handler execute anything when
aforementioned values has changed
$digest: - when handler function iterate
through all watcher than automatic triggered fired by $digest().after fired
$digest watcher checked old & new values are different if yes than the
corresponding listener function executes.
Syntax: - $scope. $digest ();
$scope.
$apply (function () {
});
$apply: - It is called wrapper around
$rootscope. It used by calling itself without passing argument in it.when user
changed in model outside of angular context* than angular that changed by
calling $apply () manually. After calling $apply when it finished angular
called $digit () internally.
Syntax: - $scope. $apply ();
$scope.
$apply (function () {
});
Context*:- Dom event, set timeout and third
party software.
No comments:
Post a Comment