AngularJS Password Match Validator

by lsiv568

HTML

<div ng-app="passwordMatchValidator" ng-controller="FormCtrl">
    <form name="resetPasswordForm" ng-submit="resetPassword(password)">
        <h2> Reset Password</h2>
        <div>
            <span class="msg-error" ng-show="resetPasswordForm.verifyPassword.$error.passwordMatch">
                Passwords Must Match.
            </span>
        </div>
        <div>
            <span>Password</span>
            <input type="password" ng-model="password.password" ng-required="true" id="password-to-verify" />
            <span>Verify Password</span>
            <input type="password" ng-model="password.verifyPassword" ng-required="true" name="verifyPassword"
                         password-match/>
        </div>
        <div>
            <button ng-disabled="resetPasswordForm.$invalid">Reset Password</button>
        </div>
    </form>
</div>

CSS

.msg-error {
    color: red;
}

CoffeeScript

'use strict';

app = angular.module('passwordMatchValidator', [])
app.directive 'passwordMatch', ->
    require: 'ngModel'
    link: (scope, elem, attrs, ctrl) ->

      firstPasswordElement = angular.element(document.getElementById('password-to-verify'))

      checkMatch = ->
        scope.$apply ->
          valid = elem.val() is firstPasswordElement.val()
          ctrl.$setValidity 'passwordMatch', valid

      for theElement in [firstPasswordElement, elem]
        theElement.bind 'keyup', ->
          checkMatch()
app.controller 'FormCtrl', ($scope) ->
  $scope.resetPassword = (password) ->
    alert 'resetting password'
            
angular.bootstrap document, ['passwordMatchValidator']