angular.module('MyApp')
.directive('repeatPassword', function () {
return {
require: 'ngModel',
link: function (scope, elem, attrs, ctrl) {
var otherInput = elem.inheritedData("$formController")[attrs.repeatPassword];
ctrl.$parsers.push(function (value) {
if (value === otherInput.$viewValue) {
//console.log(value);
ctrl.$setValidity('repeat', true);
return value;
}
ctrl.$setValidity('repeat', false);
});
otherInput.$parsers.push(function (value) {
ctrl.$setValidity('repeat', value === ctrl.$viewValue);
return value;
});
}
};
});
<div class="form-group" ng-class="{'has-success': signupForm.confirmPassword.$valid && signupForm.confirmPassword.$dirty, 'has-error':signupForm.confirmPassword.$invalid && signupForm.confirmPassword.$dirty}">
<input type="password" class="form-control input-lg" name='confirmPassword' ng-model="confirmPassword" repeat-password="password" placeholder="Confirm Password" required>
<div class="help-block text-danger my-special-animation" ng-if="signupForm.confirmPassword.$dirty" ng-messages="signupForm.confirmPassword.$error">
<div ng-message="required">You must confirm your password.</div>
<div ng-message="repeat">Passwords do not match.</div>
</div>
</div>
Maybe I'm missing something. compared to the rest of the demo/tutorial you didn't explain as much how you defined it.
Really awesome demo, thanks for your help.