AngularJS Password Match Form Validator

This directive comes in handy when writing account creation or user reset forms.

TL;DR

See It In Action

The Directive

The directive is fairly straight forward.

1. It retrieves the first password input by the supplied id password-to-verify.
   
2. The second input element is passed into the link function because it is where the directive is being applied.
   
3. The two password inputs are bound to the 'keyup' event. When triggered, the checkMatch function is called. This function sets the validity value of the named input based on whether or not the two input field values match.

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

Usage

In order for the directive to work, the following things are required on the form:

1. An id of password-to-verify must be supplied on the first password input
2. password-match directive should be applied to verify password input. A name should be supplied to this input in order to check for errors i.e. ng-show="resetPasswordForm.verifyPassword.$error.passwordMatch"

Check out a complete working example