Angularjs - Password Match

by Galo Aragoneses

HTML

<script src="https://code.angularjs.org/1.2.9/angular.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<div ng-app="myApp">
    <password-match></password-match>
</div>

JavaScript

var myApp = angular.module('myApp', []);

myApp.directive('passwordMatch', function() {
    var validElement = angular.element('<div class="btn"></div>');
    
    var passwordVal = '',
        confirmPasswordVal = '';
    
    this.checkPassword = function () {       
        if(passwordVal === confirmPasswordVal && !!passwordVal && !!confirmPasswordVal) {
            validElement.addClass('btn-success').removeClass('btn-warning').html('OK');
        } else {
            validElement.addClass('btn-warning').removeClass('btn-success').html('NO');
        }
    }
    
    this.link = function (scope) {
        scope.$watch('model.password', function (value) {
            console.log('password: ' + value);
            passwordVal = value;
            checkPassword();
        })
        
        scope.$watch('model.confirmPassword', function (value) {
            console.log('confirmPassword: ' + value);
            confirmPasswordVal = value;
            checkPassword();
        })
    }
                      
    return {
        restrict: 'E',
        replace: true,
        template: '<div>password: <input type="text" ng-model="model.password" /><br />confirm: <input type="text" ng-model="model.confirmPassword" /><br /></div>',
        compile: function (tElem) {
            tElem.append(validElement);  
            return link;
        }
    }
});