The below code snippet shows that how can you implement ‘Password and retype password fields should be matched’ validation/feature using the AngularJs.
The following html code has two password typed input fields:
<body ng-controller="MainCtrl">
<form name="form1">
<div>
<label>Password</label>
<input type="password" ng-model="user.password" required />
</div>
<div>
<label>Confirm Password</label>
<input type="password" ng-model="user.confirmPassword" required />
</div>
<span ng-show="form1.$error.passwordMatch">gfgfg</span>
</form>
</body>We are using $watchGroup which is a variant of $watch() where it watches the values of the ‘password’ and ‘retype password’ input fields. If the user enters into any field, then validate() method will be called.
var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope) { $scope.user = { password: '', confirmPassword: '', userId: '' } $scope.$watchGroup(['user.confirmPassword','user.password'], function() { validate(); }); var validate = function() { // values var val1 = $scope.user.password; var val2 = $scope.user.confirmPassword; // set validity $scope.form1.$setValidity('passwordMatch', !val1 || !val2 || val1 === val2); }; });
Each time when validate() method will be called, the validity state of the form ‘form1’ will be changed.