eckige validieren input type="Zahl"

Ich habe markup wie dieses:

<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>

Und ich will, dass die span-zu zeigen, wenn der Benutzer aus versehen einen Brief in den zweiten Eingang. Einfach, Recht? Als (wahrscheinlich) problem bezieht sich auf den Wert in der zweiten Eingabe wird ausgeblendet, wenn sich der Benutzer bewegt den ersten regler-Eingang. Warum? Dies geschieht nicht, wenn ich entfernen type-number aus dem markup.

Klar zu sein: ich möchte der Benutzer das tooltip-Fehler sofort nach der Eingabe, ohne den "submit" - Aktion. (Ich würde es vorziehen, nicht zu haben, um mit der form element in der Tat, aber alle dazugehörigen demos scheinen zu erfordern.)

http://jsfiddle.net/7FfWT/

Abhilfe ist herzlich willkommen. Poste bitte ein funktionierendes fiddle, wenn möglich.

InformationsquelleAutor der Frage Ben | 2013-06-30

  1. 15

    Es scheint ein komisches Problem mit type="number" spielt schön mit anderen inputs.

    Die Beiträge in diesem google groups post bekommen sollten Sie auf die richtige Spur. Besonders der Letzte post dort: https://groups.google.com/forum/#!msg/eckig/Ecjx2fo8Qvk/x6iNlZrO_mwJ

    Die jsfiddle-link ist: http://jsfiddle.net/ABE8U/

    Als eine Arbeit um, er machte eine Richtlinie:

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

    Kredit Schmuli Raskin

    InformationsquelleAutor der Antwort jzm

  2. 14

    Außerdem können Sie mit ng-pattern als validator: 

    <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*$/;

    InformationsquelleAutor der Antwort zenio

  3. 1

    Ich habe aktualisiert die Richtlinie zur Arbeit mit ng-repeat-Filter. Bemerken, dass das '$', das ist ein Platzhalter. Diese Richtlinie sollte handle 0 einfach nur gut. Es scheitert über Platzhalter auf 

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

    InformationsquelleAutor der Antwort FesterCluck

  4. 0

    jzm Antwort für mich gearbeitet, bis ich brauchte, '0' als Eingabe. Ich angepasst 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 || '');
            });
        }
    };
});

    Bemerken, die neben der if (value === 0) block.

    Jemanden, der versteht, JavaScript logische Vergleiche besser als ich könnte wahrscheinlich schaffen mehr eleganten code.

    InformationsquelleAutor der Antwort Jeremy

  5. 0

    jzm,s Antwort ist wirklich wunderbar, trick und gespeichert meiner Zeit.

    Ich bin gerade dabei einen Schritt weiter und ersetzen parseFloat(value) mit dem, was Sie eigentlich tut. 

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

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

    InformationsquelleAutor der Antwort immirza

Schreibe einen Kommentar