ng-pattern for the same password and confirm password - angularjs

Question

app.directive("pwCheck", function () {
alert('hey');
return {
require: 'ngModel',
link: function (scope, elem, attrs, ctrl) {
var firstPassword = '#' + attrs.pwCheck;
elem.add(firstPassword).on('keyup', function () {
scope.$apply(function () {
// console.info(elem.val() === $(firstPassword).val());
ctrl.$setValidity('pwmatch', elem.val() === $(firstPassword).val());
});
});
}
}
});
I have a signup form and users must to input a password and a confirm password, My problem is my directive is not working in validating the password in confirm password to check if the password are the same, Is there another way to implement this validation like ng-pattern to check if the inputs are the same?Thanks in advance.

Answer 1

A better approach is to the $validators pipeline. However, this is also implemented in a form of a directive. This feature was introduced in Angular 1.3. The old fashion way was to use $parsers and / or $formatters. The huge advantage of the validators pipeline is that you have access to both, viewValue and modelValue. Just pass the password to the directive and add a new validator.
var app = angular.module('myApp', []);
app.controller('TestCtrl', TestController);
function TestController() {
var vm = this;
vm.password = '';
vm.confirmPassword = '';
}
app.directive('confirmPassword', ConfirmPassword);
function ConfirmPassword() {
var linkFn = function(scope, element, attributes, ngModel) {
ngModel.$validators.confirmPassword = function(modelValue) {
return modelValue == scope.password;
};
scope.$watch("password", function() {
ngModel.$validate();
});
};
return {
require: "ngModel",
scope: {
password: "=confirmPassword"
},
link: linkFn
};
};
input {
display: block;
margin-top: 5px;
margin-bottom: 10px;
}
.error {
color: red;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app="myApp" ng-controller="TestCtrl as testCtrl">
<form name="myForm">
<label for="password">Password</label>
<input id="password" name="password" ng-model="testCtrl.password" type="password" />
<label for="confirmPassword">Confirm Password</label>
<input id="confirmPassword" name="confirmPassword" ng-model="testCtrl.confirmPassword" data-confirm-password="testCtrl.password" type="password" />
<span class="error" ng-show="myForm.confirmPassword.$invalid && !myForm.confirmPassword.$pristine">Passwords do not match!</span>
</form>
</div>
This will check if both passwords are matching. If the passwords do not match the validity will be false. In this case I display an error message.