AngularJs Directive for matching input fields
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

<script src=""></script>

An AngularJS Validator for matching fields

There is often a need for comparing the equality of input fields such as email address or passwords.

Sample Code##

<form name="form">
  <label class="control-label">User Name</label>
  <input type="text" name="user" placeholder="User Name"/>

  <label class="control-label">Password</label>
  <input type="password" name="password" placeholder="Password"/>

  <label class="control-label">Confirm Password</label>
  <input type="password" name="confirm_password" placeholder="Confirm Password" matcher="{'field_to_match': 'password', 'error_name': 'passMatch'}"/>
  <label ng-show="form.confirm_password.$error.passMatch" class="help-inline required">Passwords do not match!</label>

To enable match comparison on your fields do the following -

  1. Add the directive code to your application.
  2. Prvide a name to your form <form name="myForm">
  3. Add the matcher directive to your html element.
  4. Set name attribute on both the fields whose values are to be compared.
  5. Pass a JSON to the directive matcher="{'field_to_match': 'password', 'error_name': 'passMatch'}"
  6. The field_to_match represents the input field that it has to match.
  7. The error_name represents the name of the angular error that you can use to check the validity of the field - form.confirm_password.$error.passMatch
  8. The error also reflects in the validity of the form which can be checked using - form.$invalid

To Do -

  • Change the passing of JSON string to object, as that necessiates eval. I am using jade which has trouble with the object notation, thus the stopgap.
  • Add a working example on the readme.
  • Get literate programming working !

Credits -