Formulaire personnalisé de validation de la directive pour comparer deux champs

Je suis angulaire débutant, et je suis tomber sur quelque chose dans la façon dont angulaire de la validation du formulaire de directives de travail.

Je sais que je peux facilement ajouter des directives de champs individuels, mais je vais essayer d'ajouter une validation qui sera comparer deux champs de formulaire (les deux sont des éléments d'un modèle).

Ici est une forme de squelette:

<form name="edit_form" >
  <input name="min" type="number" ng-model="field.min"/>
  <input name="max" type="number" ng-model="field.max"/>
</form>

<div class="error" ng-show="edit_form.min.$dirty || edit_form.max.$dirty">
  <small class="error" ng-show="(what goes here?)">
    Min cannot exceed max
  </small>
</div>

En bref, je veux écrire une directive et l'utiliser pour afficher/masquer cette small.error si min et max les deux ont des valeurs mais min > max. Comment puis-je accéder à la fois les champs à l'intérieur d'une directive? Est une directive le bon outil pour ce travail?

InformationsquelleAutor asfallows | 2014-01-07
  1. 57

    De nombreuses façons à la peau d'un chat.

    PLUNKER

    app.directive('lowerThan', [
  function() {

    var link = function($scope, $element, $attrs, ctrl) {

      var validate = function(viewValue) {
        var comparisonModel = $attrs.lowerThan;

        if(!viewValue || !comparisonModel){
          //It's valid because we have nothing to compare against
          ctrl.$setValidity('lowerThan', true);
        }

        //It's valid if model is lower than the model we're comparing against
        ctrl.$setValidity('lowerThan', parseInt(viewValue, 10) < parseInt(comparisonModel, 10) );
        return viewValue;
      };

      ctrl.$parsers.unshift(validate);
      ctrl.$formatters.push(validate);

      $attrs.$observe('lowerThan', function(comparisonModel){
        //Whenever the comparison model changes we'll re-validate
        return validate(ctrl.$viewValue);
      });

    };

    return {
      require: 'ngModel',
      link: link
    };

  }
]);

    Utilisation:

    <input name="min" type="number" ng-model="field.min" lower-than="{{field.max}}" />
<span class="error" ng-show="form.min.$error.lowerThan">
  Min cannot exceed max.
</span>
    • Merci pour cette astuce! En jouant avec les plunker, j'ai trouvé qu'il semble être la seule à être en comparant le premier chiffre de chaque champ. Essayez de mettre 300 dans max et 40 min. Pourquoi est-ce?
    • Ups, j'ai oublié d'analyser la valeur de type int. Plunker fixe. De toute façon, j'appellerais cela une réponse, pas une astuce. 😉
    • Merci beaucoup! Pardonnez mon occasionnels de la langue, c'est une bonne réponse. 🙂
    • est-il possible d'utiliser le même pour la date de comparaison?
    • Est sans aucun doute. Pour prendre mon exemple, l'ajuster en fonction de la date de comparaison et de voir comment il va. Si des problèmes de poster sur DONC.
    • j'ai analysé la date et comparés entre eux et il fonctionne parfaitement mais lorsque la page est chargée première fois, il affiche min ne peut pas dépasser max. J'ai essayé d'utiliser la touche ctrl.$setValidity('lowerThan', false); mais encore, l'erreur est affichée en premier temps
    • Poster de nouveau DONC, la question et le lien ici.
    • stackoverflow.com/questions/23308956/...
    • Merci!!!! Est-il possible d'éviter d'évaluation dans le html et le remplacer lower-than="{{field.max}}" avec lower-than="field.max"? Dans de tels cas comparisonModel devient tout simplement le nom du modèle de la liaison dans le code JS -- comment je pourrais obtenir la valeur de celui-ci alors?
    • Beau travail pour montrer comment créer des validateurs, mais c'est vrai aussi que kamirru réponse va droit au but et est plus facile à utiliser le $erreur à afficher (nomformulaire.fieldname.$erreur...)

    InformationsquelleAutor Stewie
  2. 76

    Vous n'avez besoin d'aucune directive. Suffit d'attribuer le "min" la valeur de max min valeur. Comme:

    <input name="min" type="number" ng-model="field.min"/>
<input name="max" type="number" ng-model="field.max" min=" {{ field.min }}"/>

    Et vous n'avez pas besoin de personnalisation.

    Plus: vous pouvez faire min=" {{ field.min + 1}}"

    • Fonctionne très bien! Simple et droit au but.
    • C'est une excellente solution. Beaucoup mieux que d'utiliser une Directive. Jusqu'voter cette réponse s'il vous plaît, ce doit être sur le dessus!
    • ceci est utile, il fonctionne certes pour des situations simples.
    • Bien meilleure solution que l'on a accepté de répondre, pour la simple situation.
    • La fissuration de la solution, merci
    • Bien que cette solution est beaucoup mieux, acceptées correspond le mieux à la question, qui demande une directive pour valider les 2 champs. - Je atteindre ce post car ma recherche correspondait à la question et la solution donnée correspond à mon problème!
    • Éclat, ce fut d'une grande aide et très soigné pour démarrer.
    • min=" {{ domaine.min + 1}}" ne fonctionne que pour les entiers.

    InformationsquelleAutor kamirru
  3. 5

    Serait une simple comparaison vous convient-il?

    <small class="error" ng-show="field.min > field.max">

    Je pense qu'une directive serait inutile si votre cause est juste cette. Si vous ne vous sentez pas à l'aise avec la vue contenant la logique de l'application, vous pouvez l'exporter dans une fonction de contrôleur:

    $scope.isMinMaxInalid = function() {
    return $scope.field.min > $scope.field.max;
};

    Et le modèle:

    <small class="error" ng-show="isMinMaxInalid()">
    • Merci pour la réponse rapide Nikos. Je ne vois qu'une comparaison comme ça, c'est beaucoup plus facile dans une base de cas. Cependant, je suis intéressé par la création d'une forme plus générale de validation de suite pour une application plus large. J'aimerais, dans l'idéal, de faire une directive que je peux appliquer à toute forme qui a deux champs qui doivent être comparés. Je vais laisser aller que si besoin est, mais je suis plein d'espoir à ce sujet.
    • Je pensais alors... en fait, j'ai mis en place une validation de la bibliothèque de mon employeur actuel, à code source fermé malheureusement. Le concept de ma bibliothèque est de faire en sorte de "annoter" les classes du modèle avec les contraintes de validation (voir Java beans de validation) et de les faire respecter dans la vue, et garder une trace de cross-validation de champ de questions de ce genre. Donc, c'est certainement faisable, mais c'est plutôt grand-ish...
    InformationsquelleAutor Nikos Paraskevopoulos
  4. 2

    Pour moi, au-delà d'un message de commentaire, j'avais besoin de définir le champ comme invalide, l'empêchant de se soumettre. J'ai donc rassemblé quelques approches, comme @thestewie approche, avec une configuration de la vue de recueillir une solution pour les dates de comparaison. J'espère pouvez regrouper les solutions qui ont été présentés.

    Le code est dans PLUNKER

    angular.module('MyApp')
.directive('thisEarlierThan', function () {
return {
require: 'ngModel',
restrict: 'A',
link: function (scope, elem, attrs, ctrl) {
var startDate,
endDate;
scope.$watch(attrs.ngModel, function (newVal, oldVal, scope) {
startDate = newVal;
check();
});
scope.$watch(attrs.thisEarlierThan, function (newVal, oldVal, scope) {
endDate = newVal;
check();
});
var check = function () {
if (typeof startDate === 'undefined' || typeof endDate === 'undefined') {
return;
}
if (!validate(startDate)) {
startDate = new Date(startDate);
if (!validate(startDate)) {
return;
}
}
if (!validate(endDate)) {
endDate = new Date(endDate);
if (!validate(endDate)) {
return;
}
}
if (startDate < endDate) {
ctrl.$setValidity('thisEarlierThan', true);
}
else {
ctrl.$setValidity('thisEarlierThan', false);
}
return;
};
var validate = function (date) {
if (Object.prototype.toString.call(date) === '[object Date]') {
if (isNaN(date.getTime())) {
return false;
}
else {
return true;
}
}
else {
return false;
}
};
}
};
})
;
    InformationsquelleAutor Bernardo Loureiro
  5. 2

    Ma version de la directive:

    module.directive('greaterThan', function () {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attributes, ngModelController) {
var otherValue;
scope.$watch(attributes.greaterThan, function (value) {
otherValue = value;
ngModelController.$validate();
});
ngModelController.$parsers.unshift(function (viewValue) {
ngModelController.$setValidity('greaterThan', !viewValue || !otherValue || viewValue > otherValue);
return viewValue;
});
}
};
});
    InformationsquelleAutor Peter Hedberg
  6. 0

    Vous pouvez prendre un coup d'oeil à https://github.com/nelsonomuto/angular-ui-form-validation

    Cela donne une directive qui est préconfiguré avec une api qui expose la portée et de ses modèles à votre programme de validation de fonction.

    Ici est un plunker avec le votre cas d'utilisation spécifiques: http://plnkr.co/edit/S0rBlS?p=preview

    La syntaxe pour les directives validateurs est, comme indiqué dans l'exemple ci-dessous :

    {
    errorMessage: 'Cannot contain the number one',
    validator: function (errorMessageElement, val, attr, element, model, modelCtrl){
    /**
    * The model and modelCtrl(scope) are exposed in the validator function
    * */
    return /1/.test(val) !== true;
    }
    }

    InformationsquelleAutor nelsonomuto