This directive comes in handy when writing account creation or user reset forms.
The directive is fairly straight forward.
- It retrieves the first password input by the supplied id
- The second input element is passed into the
linkfunction because it is where the directive is being applied.
- The two password inputs are bound to the 'keyup' event. When triggered, the
checkMatchfunction 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
In order for the directive to work, the following things are required on the form:
- An id of
password-to-verifymust be supplied on the first password input
password-matchdirective should be applied to verify password input. A
nameshould be supplied to this input in order to check for errors i.e.
Check out a complete working example