Angular using to apply password mismatch validation in the form. We need a password match validation, When i interred my password field value say for example admin(*****) and conform password field will inter match the same value from the field. The value are match means set flag for a variable is True or mismatched the value means it will set Fasle.
Based this flag value to show the message form to apply directive of ng-show. This logic apply email validation also.
AngularJS:
var app = angular.module('frmVal',[]);
app.controller('FrmCtrl', function($scope){
$scope.pwd = "";
$scope.cpwd = "";
$scope.isMatch = true;
$scope.$watch('pwd', function(newValue, oldValue){
if(newValue == $scope.cpwd)
{
$scope.isMatch = false;
} else {
$scope.isMatch = true;
}
});
$scope.$watch('cpwd', function(newValue, oldValue){
if(newValue == $scope.pwd)
{
$scope.isMatch = false;
} else {
$scope.isMatch = true;
}
});
});
HTML:
<div ng-app="frmVal">
<div ng-controller="FrmCtrl">
Password <input type="text" ng-model="pwd" /> <br/>
Conform Password <input type="text" ng-model="cpwd" /><br/>
<div class="error" ng-show="isMatch"> Do not Match</div>
</div>
</div>
Result:
Demo
Based this flag value to show the message form to apply directive of ng-show. This logic apply email validation also.
AngularJS:
var app = angular.module('frmVal',[]);
app.controller('FrmCtrl', function($scope){
$scope.pwd = "";
$scope.cpwd = "";
$scope.isMatch = true;
$scope.$watch('pwd', function(newValue, oldValue){
if(newValue == $scope.cpwd)
{
$scope.isMatch = false;
} else {
$scope.isMatch = true;
}
});
$scope.$watch('cpwd', function(newValue, oldValue){
if(newValue == $scope.pwd)
{
$scope.isMatch = false;
} else {
$scope.isMatch = true;
}
});
});
HTML:
<div ng-app="frmVal">
<div ng-controller="FrmCtrl">
Password <input type="text" ng-model="pwd" /> <br/>
Conform Password <input type="text" ng-model="cpwd" /><br/>
<div class="error" ng-show="isMatch"> Do not Match</div>
</div>
</div>
Result:
Demo
After completing my course at online Angularjs training center, I started following this blog for revision of the subject and it really helped a lot to gain more knowledge.
ReplyDeletethank you
ReplyDelete