angularjs valider la saisie et à empêcher les changements non valide si

Je neeed un champ de saisie où je peux entrer uniquement les valeurs 1, 2 ou 3, donc je suis en train de construire une directive qui empêche toutes les modifications apportées au modèle, s'il ne correspond pas à ces valeurs.

par exemple, la valeur est 1 et je le change pour 5 il convient de toujours 1.

J'ai mis en place un petit violon http://jsfiddle.net/kannix/Q5YKE/ mais il s'agit probablement d'une erreur d'utiliser le $analyseurs.

app.directive('myvalidator', function () {
    return {
        require: 'ngModel',
        link: function (scope, elm, attrs, ctrl) {
            var validValues = [1,2,3];
            ctrl.$parsers.push(function (value) {
                if (validValues.indexOf(value) === -1){
                    //what to do here? should refuse wrong value and leave the old one
                }   
            });
        }
    }   

})

OriginalL'auteur kannix | 2013-08-14

  1. 4

    Vous pouvez toujours écouter la keypress de l'événement et de prévenir la caractère de le faire à travers. Voici une plunker

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

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.validValues = ['a','1','2'];
});

app.directive('myValidator', function ($parse) {
    return {
        scope: {
          validValues: '=validValues'
        },
        link: function (scope, elm, attrs) {
          elm.bind('keypress', function(e){
            var char = String.fromCharCode(e.which||e.charCode||e.keyCode), matches = [];
            angular.forEach(scope.validValues, function(value, key){
              if(char === value) matches.push(char);
            }, matches);
            if(matches.length == 0){
              e.preventDefault();
              return false;
            }
          });
        }
    }   
});
    Un nettoyant approche serait d'utiliser une expression à la place de l'itération à travers un Tableau. J'essayais juste de vous éviter d'avoir à modifier votre code de trop.
    merci pour votre réponse qui m'aide beaucoup 🙂 que voulez-vous dire en utilisant une expression au lieu d'un tableau? une regex?
    Oui. Une expression régulière doit effectuer un peu mieux et va rendre les choses beaucoup plus propres(selon la complexité de votre expression est... j'ai vu quelques-uns des moches).
    Je vais mettre à jour ma réponse avec une expression régulière approche.
    A une solution avec une regex moi-même 🙂 jsfiddle.net/kannix/Q5YKE/1 Mais j'ai encore une question, pourquoi utiliser $parse ? semble fonctionner très bien sans elle?

    OriginalL'auteur Brian Lewis

  2. 21

    J'ai écrit récemment une directive pour cette seule raison. Il prend un objet regExp qui valide les entrants appuis sur une touche et permet seulement si sont valables:

    //forces keystrokes that satisfy the regExp passed
app.directive("regExpRequire", function() {

    var regexp;
    return {
        restrict: "A",
        link: function(scope, elem, attrs) {
            regexp = eval(attrs.regExpRequire);

            var char;
            elem.on("keypress", function(event) {
                char = String.fromCharCode(event.which)
                if(!regexp.test(elem.val() + char))
                    event.preventDefault();
            })
        }
    }

})

    Modèle d'utilisation: <input type="text" reg-exp-require="/^[a-zA-Z]$/">

    Ou dans votre cas: <input type="text" reg-exp-require="/^[1-3]*$/">

    Cela a fonctionné pour moi, bon travail!
    +100 je vous remercie pour cette
    Cela s'attend à ce que l'utilisateur appuie sur la clé à la dernière position d'entrée. Ce n'est pas certain.

    OriginalL'auteur Ian Haggerty

  3. 6

    Je vous recommande d'utiliser le ng-pattern-restrict directive.

    Obtenez la bibliothèque et simplement décorer votre entrée comme suit:

    <input type="text" pattern="[0-9]+" ng-pattern-restrict />

    GitHub: AlphaGit/ng-pattern-limiter

    Wow, je souhaite que je trouve cela tout à l'heure. Je suis étonné de voir comment de nombreuses heures que j'ai déjà passé à essayer d'empêcher l'activation d'une touche de se produire par l'intermédiaire d'une directive. Merci!
    Btw, le modèle devrait probablement être ^[0-9]*$ sinon vous ne serez jamais en mesure de supprimer le dernier chiffre de texte puisque vous êtes exigeant un ou de plusieurs numéros.

    OriginalL'auteur Mobiletainment

  4. 2

    En fait, j'ai dû construire sur et de modifier le formulaire de réponse Ian Haggerty. Son code a bien fonctionné, jusqu'à ce que j'ai commencé à le tester dans différentes manières. J'étais précisément en train de tester, pour des valeurs inférieures à 100, mais j'ai été l'obtention de certains résultats étranges.

    Si j'avais 100 dans mon entrée, puis essayé d'insérer une virgule pour faire 10.0, Ian fix n'était pas la raison pour cela, et dit que ce n'était pas correspondant à mon regex (même si j'ai jusqu'à deux décimales). S'avère que ce sont toujours ajouté le personnage que j'pressé, à la FIN de la chaîne, il a été l'essai, même si j'étais de l'insérer dans le milieu.

    Mon changement a été pour stocker la valeur d'origine sur "keypress", puis sur "keyup" (ou "modifier" si vous préférez), il ne la vérification de la valeur nouvelle. Si non valide, puis il revient à l'original.

    Malheureusement, il n'mise à jour le modèle brièvement, mais au moins il vous permet de taper des caractères au milieu ou au début de la valeur d'entrée et encore le match contre la regex correctement. Dans Angulaire 1.3, on peut probablement utiliser ng-modèle-options="{anti-rebond:250}" pour contrer cela. Avoir tout le code qui s'appuie sur ce modèle, le changement indempotent aide énormément.

    usage: <input ... validate-with="/^([\d]{1,2}\.[\d]{1,2}|\.?[\d]{1,2}|100)?$/" />

.directive("validateWith", [function(){
    return {
        restrict: "A",
        link: function($scope, $el, $attrs){
            var regexp = eval($attrs.validateWith);
            var origVal;
            //store the current value as it was before the change was made
            $el.on("keypress", function(e){
                origVal = $el.val();
            });

            //after the change is made, validate the new value
            //if invalid, just change it back to the original
            $el.on("keyup", function(e){
                if(!regexp.test($el.val())){
                    $el.val(origVal);
                }
            });
        }
    }
}]);
    En fait, tout cela met à jour la valeur dans le champ de saisie, le modèle a été endommagé dans mon code. Ce qui est plus proche de ce que je cherche, mais besoin de mettre à jour le modèle de nouveau sur keyup, et pas seulement de la valeur d'entrée.
    Ah oui - nice plus. C'est incroyable ce que vous ne pensez pas quand se gratter les choses ensemble. Ce serait sans doute plus convivial trop (quoi de plus ennuyeux est une clé de la presse ne fait rien!).

    OriginalL'auteur coblr