angular-password's Introduction

angular-password

The most performant AngularJS directive for matching two password input fields. I use angular's built in $parsers rather than relying on a $watch

Installation

bower install angular-password

npm install angular-password

Inject angular-password into your module

angular.module('yourmodulename', ['ngPassword']);

Simple example.

<input name="newPassword" ng-model="password.new">
<input match-password="newPassword" name="confirmPassword" ng-model="password.confirm">

With ngMessages

<form name="profileForm" autocomplete="off" novalidate="" ng-submit="submit(password)">
  <fieldset>
    <label for="newPassword">New Password</label>
    <input type="password" name="newPassword" ng-model="password.new" required=""/>
    <div class="clearfix">
      <div ng-messages="profileForm.newPassword.$error" ng-if="profileForm.$submitted || profileForm.newPassword.$dirty" ng-messages-multiple="ng-messages-multiple" class="error-messages slide-right">
        <div ng-message="required" class="message slide-left">You did not enter a field name</div>
      </div>
    </div>
    <label for="confirmPassword">Re-Type New Password</label>
    <input type="password" name="confirmPassword" ng-model="password.confirm" match-password="newPassword" required=""/>
    <div class="clearfix">
      <div ng-messages="profileForm.confirmPassword.$error" ng-if="profileForm.$submitted || profileForm.confirmPassword.$dirty" ng-messages-multiple="ng-messages-multiple" class="error-messages slide-right">
        <div ng-message="required" class="message slide-left">You did not enter a field name</div>
        <div ng-message="passwordMatch" class="message slide-left">Your passwords did not match</div>
      </div>
    </div>
  </fieldset>
  <button>Submit</button>
</form>