This directive comes in handy when writing account creation or user reset forms.
See It In Action
The directive is fairly straight forward.
- It retrieves the first password input by the supplied id
- The second input element is passed into the
link function because it is where the directive is being applied.
- 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 = ->
valid = elem.val() is firstPasswordElement.val()
ctrl.$setValidity 'passwordMatch', valid
In order for the directive to work, the following things are required on the form:
- An id of
password-to-verify must be supplied on the first password input
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.
Check out a complete working example