mot de passe-vérifier la directive en angularjs

Cela devrait résoudre:

Vue:

<div ng-controller='Ctrl'>
   <form name='form'>
      <input data-ng-model='user.password' type="password" name='password' placeholder='password' required>
      <div ng-show="form.password.$error.required">
        Field required</div>
      <input ng-model='user.password_verify' type="password" name='confirm_password' placeholder='confirm password' required data-password-verify="user.password">
      <div ng-show="form.confirm_password.$error.required">
        Field required!</div>
      <div ng-show="form.confirm_password.$error.passwordVerify">
        Fields are not equal!</div>
   </form
</div>

Directive

var app = angular.module('myApp', []);

app.directive("passwordVerify", function() {
   return {
      require: "ngModel",
      scope: {
        passwordVerify: '='
      },
      link: function(scope, element, attrs, ctrl) {
        scope.$watch(function() {
            var combined;

            if (scope.passwordVerify || ctrl.$viewValue) {
               combined = scope.passwordVerify + '_' + ctrl.$viewValue; 
            }                    
            return combined;
        }, function(value) {
            if (value) {
                ctrl.$parsers.unshift(function(viewValue) {
                    var origin = scope.passwordVerify;
                    if (origin !== viewValue) {
                        ctrl.$setValidity("passwordVerify", false);
                        return undefined;
                    } else {
                        ctrl.$setValidity("passwordVerify", true);
                        return viewValue;
                    }
                });
            }
        });
     }
   };
});

La création d'une directive distincte, ce n'est pas nécessaire. Il y a déjà un construire Angulaire de l'INTERFACE utilisateur mot de passe outil de validation. Avec ce que vous pouvez faire:

<input name="password" required ng-model="password">
<input name="confirm_password"
       ui-validate=" '$value==password' "
       ui-validate-watch=" 'password' ">

 Passwords match? {{!!form.confirm_password.$error.validator}}

Je l'ai fait sans directive.

<input type="password" ng-model="user.password" name="uPassword" required placeholder='Password' ng-minlength="3" ng-maxlength="15" title="3 to 15 characters" />
    <span class="error" ng-show="form.uPassword.$dirty && form.uPassword.$error.minlength">Too short</span>
    <span ng-show="form.uPassword.$dirty && form.uPassword.$error.required">Password required.</span><br />

    <input type="password" ng-model="user.confirmpassword" name="ucPassword" required placeholder='Confirm Password' ng-minlength="3" ng-maxlength="15" title="3 to 15 characters" />
    <span class="error" ng-show="form.ucPassword.$dirty && form.ucPassword.$error.minlength">Too short</span>
    <span ng-show="form.ucPassword.$dirty && form.ucPassword.$error.required">Retype password.</span>
    <div ng-show="(form.uPassword.$dirty && form.ucPassword.$dirty) && (user.password != user.confirmpassword)">
        <span>Password mismatched</span>
    </div>

Comme angulaire 1.3.0-beta12, non valide les intrants de ne pas écrire sur ngModel, de sorte que vous ne pouvez pas le regarder, PUIS à valider comme vous pouvez le voir ici: http://plnkr.co/edit/W6AFHF308nyKVMQ9vomw?p=preview. Une nouvelle validateurs pipeline a été introduit et que vous pouvez joindre à cette fonction pour obtenir la même chose.

En fait, sur cette note, j'ai créé une charmille composant pour la commune supplémentaire validateurs: https://github.com/intellix/angular-validators qui comprend cette.

angular.module('validators').directive('equals', function() {
    return {
        restrict: 'A',
        require: '?ngModel',
        link: function(scope, elem, attrs, ngModel)
        {
            if (!ngModel) return;

            attrs.$observe('equals', function() {
                ngModel.$validate();
            });

            ngModel.$validators.equals = function(value) {
                return value === attrs.equals;
            };
        }
    };
});

angular.module('validators').directive('notEquals', function() {
    return {
        restrict: 'A',
        require: '?ngModel',
        link: function(scope, elem, attrs, ngModel)
        {
            if (!ngModel) return;

            attrs.$observe('notEquals', function() {
                ngModel.$validate();
            });

            ngModel.$validators.notEquals = function(value) {
                return value === attrs.notEquals;
            };
        }
    };
});

J'avais le même problème et trouvé une bonne post de blog sujet écrit par Piotr Buda. C'est une bonne lecture, et il explique le processus très bien. Le code est comme suit:

directives.directive("repeatPassword", function() {
    return {
        require: "ngModel",
        link: function(scope, elem, attrs, ctrl) {
            var otherInput = elem.inheritedData("$formController")[attrs.repeatPassword];

            ctrl.$parsers.push(function(value) {
                if(value === otherInput.$viewValue) {
                    ctrl.$setValidity("repeat", true);
                    return value;
                }
                ctrl.$setValidity("repeat", false);
            });

            otherInput.$parsers.push(function(value) {
                ctrl.$setValidity("repeat", value === ctrl.$viewValue);
                return value;
            });
        }
    };
});

De sorte que vous pourriez faire quelque chose comme:

<input type="password" name="repeatPassword" id="repeatPassword" placeholder="repeat password" ng-model="user.repeatPassword" repeat-password="password" required>

De crédit va à l'auteur

Cette solution est similaire à celui donné par Dominic Watson, qui utilise $validators et c'est celle que j'aime le mieux. Les seules différences sont que vous pouvez regarder une expression.

$validators Une collection de validateurs qui sont appliquées lorsque l'
modèle de changement de valeur. La valeur de la clé à l'intérieur de l'objet fait référence à la
nom du valideur tandis que la fonction se réfère à la validation
le fonctionnement. L'opération de validation est fourni avec le modèle de la valeur
comme argument, et il doit retourner une valeur true ou false en fonction de la
réponse de validation

de https://code.angularjs.org/1.3.15/docs/api/ng/type/ngModel.NgModelController

Je suis en utilisant angulaire 1.3. Mon directive ressemble à quelque chose comme ceci

angular.module('app').directive("passwordConfirm", function() {
    "use strict";
    return {
        require : "ngModel",
        restrict : "A",
        scope : {
            //We will be checking that our input is equals to this expression
            passwordConfirm : '&'
        },
        link : function(scope, element, attrs, ctrl) {
            //The actual validation
            function passwordConfirmValidator(modelValue, viewValue) {
                return modelValue == scope.passwordConfirm();
            }
            //Register the validaton when this input changes
            ctrl.$validators.passwordConfirm = passwordConfirmValidator;
            //Also validate when the expression changes
            scope.$watch(scope.passwordConfirm, ctrl.$validate);
        }
    };
});

Utiliser

<input type="password" ng-model="user.password"/>
<input type="password" ng-model="user.confirmPassword" 
                password-confirm="user.password" />

Cela fonctionne dans les deux sens et il est simple et propre

JavaScript

var app = angular.module("app");

app.controller("SamePaswordController", function () {

  this.password;
  this.confirm;

  this.save = function () {
    alert("Saved!");
  };
}


app.directive("match", function () {
  return {
    restrict:"A",
    require:"ngModel",

    link: function(scope, element, attrs, ctrl) {

      function matchValidator(value) {      

        scope.$watch(attrs.match, function(newValue, oldValue) {

          var isValid = value === scope.$eval(attrs.match);                    
          ctrl.$setValidity('match', isValid);

        });

        return value;
      }

      ctrl.$parsers.push(matchValidator);
    }
  };
});

HTML: a noter le match de la directive

<form name="regForm" ng-controller="SamePaswordController as regCtrl"
      ng-submit="regForm.$valid && regCtrl.save()" novalidate>

  <input name="password" ng-model="regCtrl.password" 
         type="password" required placeholder="Password"/>                

  <input name="confirm" ng-model="regCtrl.confirm" match="regCtrl.password"
         type="password" required placeholder="Confirm password"/>


  <div> regForm is valid:{{regForm.$valid}}</div>

  <input type="submit" value="Save"/>

</form>

Vous pouvez cloner le repo avec cet exemple
https://github.com/rogithub/roangularjs

Ce qui suit est mon point de vue sur le problème. Cette directive s'comparer à une forme de la valeur plutôt que de la portée.

'use strict';
(function () {
    angular.module('....').directive('equals', function ($timeout) {
        return {
            restrict: 'A',
            require: ['^form', 'ngModel'],
            scope: false,
            link: function ($scope, elem, attrs, controllers) {
                var validationKey = 'equals';
                var form = controllers[0];
                var ngModel = controllers[1];

                if (!ngModel) {
                    return;
                }

                //run after view has rendered
                $timeout(function(){
                    $scope.$watch(attrs.ngModel, validate);

                    $scope.$watch(form[attrs.equals], validate);
                }, 0);

                var validate = function () {
                    var value1 = ngModel.$viewValue;
                    var value2 = form[attrs.equals].$viewValue;
                    var validity = !value1 || !value2 || value1 === value2;
                    ngModel.$setValidity(validationKey, validity);
                    form[attrs.equals].$setValidity(validationKey,validity);
                };
            }
        };
    });
})();

dans le code HTML on fait maintenant référence à la forme plutôt que de l'étendue valeur:

<form name="myForm">
  <input type="text" name="value1" equals="value2">
  <input type="text" name="value2" equals="value1">
  <div ng-show="myForm.$invalid">The form is invalid!</div>
</form>

Tout d'abord, je tiens à remercier Fredric pour l'affichage de cet excellent exemple. Il y a un petit problème que j'ai rencontré par hasard. sur le Violon que vous avez posté http://jsfiddle.net/gUSZS/

Si vous tapez un mot de passe, puis tapez le même mot de passe dans le fait de vérifier l'élément d'entrée tout fonctionne bien, mais essayez d'ajouter un espace à la deuxième case et angulaire va automatiquement ajuster l'espace. Cela signifie que la directive ne marche pas "voir" l'espace supplémentaire. Maintenant, les mots de passe sont différents, mais la forme est toujours valide.

pour corriger cela, nous devons ajouter

ng-trim="false"

les éléments d'entrée. Cela ne fonctionne pas dans angulaire 1.0.3 donc, si vous voulez l'essayer dans ce violon vous devez ajouter 1.1.1 pour le Violon (http://ajax.googleapis.com/ajax/libs/angularjs/1.1.1/angular.js)

Mais encore une fois, merci Frédéric, je vais utiliser votre solution dans mon application!

Anton
P. S. je souhaite faire un commentaire sur Frédéric post, mais je suis nouveau sur ce forum et ne semble pas avoir suffisamment de crédit. Donc, il serait très apprécié si certains d'entre vous peut voter mon commentaire si vous le souhaitez 🙂

Pour ajouter le grand nombre de solutions existantes, ce qui fonctionne bien pour moi.

(Jan Laussmann réponse cessé de travailler avec la dernière AngularJS versions bêta).

directive:

angular.module('myApp').directive('matchValidator', [function() {
        return {
            require: 'ngModel',
            link: function(scope, elm, attr, ctrl) {
                var pwdWidget = elm.inheritedData('$formController')[attr.matchValidator];

                ctrl.$parsers.push(function(value) {
                    if (value === pwdWidget.$viewValue) {
                        ctrl.$setValidity('match', true); 
                        return value;
                    }                       

                    if (value && pwdWidget.$viewValue) {
                        ctrl.$setValidity('match', false);
                    }

                });

                pwdWidget.$parsers.push(function(value) {
                    if (value && ctrl.$viewValue) {
                        ctrl.$setValidity('match', value === ctrl.$viewValue);
                    }
                    return value;
                });
            }
        };
    }])

utilisation

<input type="email" ng-model="value1" name="email" required>
<input type="email" ng-model="value2" name="emailConfirm" match-validator="email" required>

erreur d'affichage de la

<div ng-if="[[yourFormName]].emailConfirm.$error">
    <div ng-if="[[yourFormName]].emailConfirm.$error.match">
        Email addresses don't match.
    </div>
</div>

Cela a fonctionné pour moi.

Directive:

modulename.directive('passwordCheck', function () {

    return {
        restrict: 'A', //only activate on element attribute
        require: '?ngModel', //get a hold of NgModelController
        link: function (scope, elem, attrs, ngModel) {
            if (!ngModel) return; //do nothing if no ng-model

            var Value = null;

            //watch own value and re-validate on change
            scope.$watch(attrs.ngModel, function (val) {
                Value = val;


                validate();
            });

            //observe the other value and re-validate on change
            attrs.$observe('passwordCheck', function () {
                validate();
            });

            var validate = function () {

                //values
                var val1 = Value;
                var val2 = attrs.passwordCheck;

                //set validity

                if (val1 != '' && val1 != undefined) {
                    ngModel.$setValidity('passwordCheck', val1 == val2);

                }

                else {
                    ngModel.$setValidity('passwordCheck', true);
                }
            };
        }
    }
});

HTML:

ng-model="confirmpassword.selected" type="password" name="confirmpassword" 

password-check="{{password.selected}}"

ng-show="resetpasswordform.confirmpassword.$error.passwordCheck && submitted" Password does not match

Quelque chose comme cela fonctionne pour moi:

js:

.directive('sameAs', function() { return {
    require : 'ngModel',
    link : function(scope, elm, attrs, ngModelCtrl) {

        ngModelCtrl.$validators.sameAs = function(modelValue, viewValue) {
            var checkedVal = attrs.sameAs;
            var thisInputVal = viewValue;

            if (thisInputVal == checkedVal) {
                return true; //valid
            } else {
                return false;
            }
        };
    }
}; });

html:

<input type="password" name="password" id="password" ng-model="password" />

<input type="password" name="passwordRepeat" id="passwordRepeat" 
    ng-model="passwordRepeat" same-as="{{password}}" />