angulaire de valider input type=“number”

J'ai majoration comme ceci:

<form name="myForm" ng-controller="myCtrl" novalidate>
    <input ng-model="theValue" type="range" min="0" max="100" required>
    <input ng-model="theValue" type="number" required></input>
    <span ng-show="theValue.$error.number">Hey! No letters, buddy!</span>
</form>

Et je veux la plage à afficher lorsque l'utilisateur accidentellement une lettre dans la seconde entrée. Simple, non? Comme une (probablement) liées problème, la valeur de la deuxième entrée disparaît lorsque l'utilisateur déplace le premier curseur de saisie. Pourquoi? Cela n'arrive pas, si je retire type-number de l'annotation.

Pour être clair: je veux que l'utilisateur de voir l'info-bulle d'erreur immédiatement lorsqu'il est tapé, sans aucun "soumettre". (Je préfère ne pas avoir à utiliser le form éléments à tous, en fait, mais toutes les démos semblent l'exiger.)

http://jsfiddle.net/7FfWT/

Aucune solution de contournement est la plupart de bienvenue. Merci de poster un travail de violon si possible.

OriginalL'auteur Ben | 2013-06-30

  1. 15

    Il semble y avoir un drôle de problème avec type="number" jouer gentiment avec les autres inputs.

    Les poteaux dans cette google groupes post devrait vous mettre sur la bonne voie. En particulier, le dernier post il y a: https://groups.google.com/forum/#!msg/angulaire/Ecjx2fo8Qvk/x6iNlZrO_mwJ

    Le jsfiddle lien est: http://jsfiddle.net/ABE8U/

    Que cela fonctionne, il a fait une directive:

    .directive('toNumber', function () {
    return {
        require: 'ngModel',
        link: function (scope, elem, attrs, ctrl) {
            ctrl.$parsers.push(function (value) {
                return parseFloat(value || '');
            });
        }
    };
});

    De crédit à Schmuli Raskin

    Génial. Heureux, il n'est pas juste moi alors 🙂 Merci à vous! (et Schmuli...) Finalement obtenu ceci: jsfiddle.net/HQUgW/13
    voir les exemples ici docs.angularjs.org/api/ng/input/input%5Bnumber%5D
    Nan 2dd retournera true. vous devriez vérifier avec !isNaN( parseFloat(obj) ) && isFinite( obj ) jsfiddle.net/ABE8U/148

    OriginalL'auteur jzm

  2. 15

    Vous pouvez également utiliser ng-modèle validateur: 

    <input type="number" ng-model="theValue" name="theValue" step="1" min="0" max="10"  ng-pattern="integerval" required>
<span ng-show="form.theValue.$invalid">Hey! No letters, buddy!</span>

$scope.integerval = /^\d*$/;
    C'est la meilleure solution si vous ne souhaitez pas utiliser html5 entrée[nombre]

    OriginalL'auteur zenio

  3. 1

    J'ai mis à jour la directive de travailler avec ng-repeat filtres. Notez que le '$', qui est un caractère générique. La présente directive devrait poignée de 0 à l'amende juste. Il bascule sur le générique sur 

    .directive('toNumber', function() {
    return {
        require: 'ngModel',
        link: function(scope, elem, attrs, ctrl) {
            ctrl.$parsers.push(function(value) {
                return value===0 ? 0 : (parseFloat(value) || '$');
            });
    };
})

    OriginalL'auteur FesterCluck

  4. 0

    jzm réponse a fonctionné pour moi jusqu'à ce que j'avais besoin de " 0 " comme une entrée. J'ai ajusté jzm code:

    .directive('toNumber', function () {
    return {
        require: 'ngModel',
        link: function (scope, elem, attrs, ctrl) {
            ctrl.$parsers.push(function (value) {
                if (value === 0)
                    return 0;

                return parseFloat(value || '');
            });
        }
    };
});

    Remarquer l'ajout de la if (value === 0) bloc.

    Quelqu'un qui comprend JavaScript comparaisons logiques mieux que je ne pourrais probablement de créer plus d'un code élégant.

    OriginalL'auteur Jeremy

  5. 0

    jzm,s réponse est vraiment merveilleux tour et sauvé mon temps.

    Je suis juste en prenant un pas de plus et le remplacement de parseFloat(value) avec ce qu'il fait réellement. 

    directive('number', function () {
    return {
        require: 'ngModel',
        link: function (scope, elem, attrs, ngModel) {

            ngModel.$parsers.push(function (value) {
                if (value==null)
                  return NaN;
            });
        }
    };
});

    OriginalL'auteur immirza