Comment puis-je faire une directive dans AngularJS pour valider l'email ou le mot de passe de confirmation sans manipulation du DOM ou jQuery?

Je veux créer un mot de passe /email de confirmation de la directive dans AngularJS, mais toutes celles que j'ai vu jusqu'à présent compter sur un lot de DOM poussant ou en le tirant en jQuery. Je voudrais compter que sur les $propriétés de l'étendue, si je peux. Quelle est la meilleure façon de le faire?

OriginalL'auteur JoshGough | 2013-07-04

  1. 25

    Après avoir regardé de nombreux moyens pratiques de mettre en œuvre ce type de directive, j'ai compris comment le faire sans manipulation du DOM ou à l'aide de jQuery. Voici un Plunk qui montre comment.

    Elle implique l'utilisation d':

    • ng-propriétés du modèle sur la somme de portée pour les deux champs de saisie
    • $parse(expr)(champ d'application) et un simple champ d'application.$regarder expression -- pour évaluer le "match" de la propriété dans le contexte actuel de la portée par rapport au $model value est utilisée de la commande sur laquelle vous ajoutez le match attribut de la directive.
    • De désactiver le bouton soumettre si l' $de propriété non valide est vrai que sur la forme sous-jacente.

    J'espère que ce sera utile à certains. Voici l'essentiel:

    var app = angular.module('app', [], function() {} );

app.directive('match', function($parse) {
  return {
    require: 'ngModel',
    link: function(scope, elem, attrs, ctrl) {
      scope.$watch(function() {        
        return $parse(attrs.match)(scope) === ctrl.$modelValue;
      }, function(currentValue) {
        ctrl.$setValidity('mismatch', currentValue);
      });
    }
  };
});

app.controller('FormController', function ($scope) {
  $scope.fields = {
    email: '',
    emailConfirm: ''
  };

  $scope.submit = function() {
    alert("Submit!");
  };
});

    Puis, en HTML:

    <!DOCTYPE html>
    <html ng-app="app">  
      <head lang="en">
        <meta charset="utf-8">
        <title>Custom Plunker</title>
        <link rel="stylesheet" href="style.css">
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
        <script src="app.js"></script>
      </head>  
      <body ng-controller="FormController">
        <form name='appForm' ng-submit='submit()'>
          <div class="control-group">
            <label class="control-label required" for="email">Email</label>
            <div class="controls">
              <input id="email" name="email" ng-model="fields.email" 
    class="input-xlarge" required="true" type="text" />
              <p class="help-block">[email protected]</p>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label required" for="emailConfirm">Confirm Email</label>
            <div class="controls">
              <input name="emailConfirm" ng-model="fields.emailConfirm" 
    class="input-xlarge" required="true"
                type="text" match="fields.email" />
              <div ng-show="appForm.emailConfirm.$error.mismatch">
                <span class="msg-error">Email and Confirm Email must match.</span>
              </div>
            </div>
          </div>
          <button ng-disabled='appForm.$invalid'>Submit</button>
        </form>
      </body>
    </html>
    Euh, downvote pourquoi? Quoi d'autre est la "réponse à votre propre question / partager les connaissances" pour les. Sheesh.
    Je ne comprends pas votre point de vue. Dois-je avoir formulé "Comment puis-je faire de tels" plutôt Comment? Lorsque vous posez une question, il précise que si vous pouvez répondre vous-même, faites-le pour répandre la connaissance.
    Voici la référence: blog.stackoverflow.com/2011/07/...
    imaginez que vous êtes sur Jeopardy!
    Merci pour ce partage.Je viens de remplacer mon propre mot de passe correspondent à la directive avec le vôtre et il fonctionne très bien. Je ne pourrais pas obtenir mon directive d'origine pour bien se lier à un modèle dans le contrôleur de parent.

    OriginalL'auteur JoshGough

  2. 1

    Cela fonctionne bien pour moi:

    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>
    Pouvez-vous fournir un violon afin que d'autres développeurs pouvez voir comment cela fonctionne? merci

    OriginalL'auteur Jarrod