validation - money - input type number thousand separator

angular validate input type="number"

Question

Tengo un marcado como este:

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

Y quiero que se muestre el lapso cuando el usuario escribe accidentalmente una letra en la segunda entrada. Simple, ¿verdad? Como un problema (probablemente) relacionado, el valor en la segunda entrada desaparece cuando el usuario mueve la primera entrada del control deslizante. ¿Por qué? Esto no ocurre si elimino type-number de tipo del marcado.

Para que quede claro: Quiero que el usuario vea el error de información sobre herramientas inmediatamente cuando se tipea, sin ninguna acción de "envío". (Preferiría no tener que usar el elemento de form en absoluto, de hecho, pero todas las demostraciones relacionadas parecen requerirlo).

http://jsfiddle.net/7FfWT/

Cualquier solución es bienvenida. Por favor, publique un violín que funcione si es posible.

Answer 1

Actualicé la directiva para trabajar con filtros ng-repeat. Observe el ''$'', que es un comodín. Esta directiva debe manejar 0 bien. Pasa a comodín en

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

Answer 2

La respuesta de Jzm es realmente un truco maravilloso y me salvó el tiempo.

Solo estoy dando un paso más y reemplazando parseFloat(value) con lo que realmente hace.

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

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

Answer 3

La respuesta de jzm funcionó para mí hasta que necesité ''0'' como entrada. Ajusté el código de jzm:

.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 || '''');
            });
        }
    };
});

Observe la adición del bloque if (value === 0) .

Alguien que entiende las comparaciones lógicas de JavaScript mejor de lo que podría probablemente crear un código más elegante.

Answer 4

Parece haber un problema extraño con type="number" jugando muy bien con otras inputs .

Las publicaciones en esta publicación de grupos de google deben guiarlo por el camino correcto. En particular, la última publicación allí: https://groups.google.com/forum/#!msg/angular/Ecjx2fo8Qvk/x6iNlZrO_mwJ

El enlace jsfiddle es: http://jsfiddle.net/ABE8U/

Como solución alternativa, él ha hecho una directiva:

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

Gracias a Schmuli Raskin

Answer 5

También puedes usar ng-pattern como validador:

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