Giter Club home page Giter Club logo

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

or

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>

Licensing information can be found here

angular-password's People

Contributors

felixfbecker avatar jdforsythe avatar mastilver avatar neil-ni avatar nexus-uw avatar patrickjs avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

angular-password's Issues

Bidirectional field verification

To solve the problem:

  1. add field1
  2. add field2 (field1 != field2)
  3. change field1 (it doesn't verify)

Would be correct add this?

 var getMatchValue = function() {
         return otherPasswordModel.$viewValue;
      }

      scope.$watch(getMatchValue, function(){
         ngModel.$$parseAndValidate();
      });

And the lib would be:

!function(angular, undefined) {
  'use strict';

  function $Password($parse) {

    function link(scope, element, attrs, ctrls) {
      var formController = ctrls[1];
      var ngModel = ctrls[0];
      var otherPasswordModel = formController[attrs.matchPassword];

      var getMatchValue = function() {
         return otherPasswordModel.$viewValue;
      }

      scope.$watch(getMatchValue, function(){
         ngModel.$$parseAndValidate();
      });

      // if ng1.3+
      if (ngModel.$validators) {
        ngModel.$validators.passwordMatch = function(modelValue) {
         return (modelValue === otherPasswordModel.$modelValue);
        };
      } else {
        ngModel.$parsers.push(function(value) {
          ngModel.$setValidity('passwordMatch', value === otherPasswordModel.$viewValue);
          return value;
        });

        otherPasswordModel.$parsers.push(function(value) {
          ngModel.$setValidity('passwordMatch', value === ngModel.$viewValue);
          return value;
        });
      }

    }

    var controllers = ['^ngModel', '^form'];

    return {
      restrict: 'A',
      require: controllers,
      link: link
    }; // end return
  }

  angular.module('ngPassword', []).directive('matchPassword', $Password);

  angular.module('angular.password', ['ngPassword']);
  angular.module('angular-password', ['ngPassword']);

  if (typeof module === 'object' && typeof define !== 'function') {
    module.exports = angular.module('ngPassword');
  }
}(angular);

Fails when one is pristine one is empty

If you type in one field then delete it, the models will be an empty string and undefined, so the do not match and the parser adds the error. If both fields are empty/undefined there should be no matching error.

wrong dependencies in package.json?

Hello :),

maybe I'm wrong, but I think these dependencies
"angular-mocks": "^1.5.5",
"gulp": "^3.9.1",
"gulp-jshint": "^2.0.0",
"gulp-rename": "^1.2.2",
"gulp-uglify": "^1.5.3",
"jasmine-core": "^2.4.1",
"jshint": "^2.9.2",
"karma": "^0.13.22",
"karma-jasmine": "^0.3.8",
"karma-phantomjs-launcher": "^1.0.0",
"karma-spec-reporter": "0.0.26",
"phantomjs-prebuilt": "^2.1.7"

should be devDependencies because only angular is needed. Jspm fails with some fetching errors because it tries to fetch all dependencies, which aren't used at runtime :).

latest release v1.0.1 misses dependencies

Hi,

could you release a new version with the proper dependencies? Looks like bower.json and package.json on master were fixed, but the latest version (referred by the tag v1.0.1) does not include the angular dependency in bower.json, yet.

BR
Erich

confirm password validation

Hello, I want to validate my from by confirming password without using ng-messages , I wish to use my properly validation with my messages, how to check if the confirm password didn't match the password error ?

ng-if="ClientInscrire.confirmPassword.$dirty ..

New npm package

Hello,

Current npm package still has the old package.json without devDependecies. It's installing phantomJS on production deploy.

Could you please make a new release to solve this?

Thank you.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.