Estoy usando ng-patrón para validar campos de formulario, y la estoy usando ng-cambiar con él para ver y procesar los cambios, sin embargo ng-cambio (o $scope.$watch) sólo se activará cuando el elemento de formulario es en el $estado válido! Soy nuevo en el angular, así que no sé cómo resolver este problema, aunque tengo la sospecha de una nueva directiva es el camino a seguir.

¿Cómo puedo obtener ng-cambiar a fuego en tanto $no válido y $válida elemento de formulario estados, con ng-patrón todavía ajuste el elemento de formulario estados como antes?

Html:

<div ng-app="test">
  <div ng-controller="controller">
    <form name="form">
        <input type="text" name="textbox" ng-pattern="/^[0-9]+$/" ng-change="change()" ng-model="inputtext"> Changes: {{ changes }}
    </form>

    <br>
    Type in any amount of numbers, and changes should increment.

    <br><br>
    Now enter anything that isn't a number, and changes will stop incrementing. When the form is in the $invalid state, ng-change doesn't fire.

    <br><br>
    Now remove all characters that aren't numbers. It will increment like normal again. When the form is in the $valid state, ng-change will fire.

    <br><br>
    I would like ng-change to fire even when the the form is $invalid.

    <br><br>
        form.$valid: <font color="red">{{ form.$valid }}</font>

  </div>
</div>

Javascript:

angular.module('test', []).controller('controller', function ($scope) {
    $scope.changes = 0;
    $scope.change = function () {
        $scope.changes += 1;
    };
});

He creado un trabajo JS Violín que muestra el problema que estoy teniendo.

http://jsfiddle.net/JAN3x/1/

Por cierto, este angular problema también parece pertinente:
https://github.com/angular/angular.js/issues/1296

InformationsquelleAutor John Doe | 2014-01-01

4 Comentarios

  1. 5

    Editar Este fue respondida cuando ng-model-options no estaba disponible. Por favor, consulte la parte superior de votación de respuesta.

    usted puede escribir una simple directiva para escuchar input evento.

    HTML:

    <input type="text" name="textbox" ng-pattern="/^[0-9]+$/" watch-change="change()" ng-model="inputtext"> Changes: {{ changes }}

    JS:

    app.directive('watchChange', function() {
        return {
            scope: {
                onchange: '&watchChange'
            },
            link: function(scope, element, attrs) {
                element.on('input', function() {
                    scope.$apply(function () {
                        scope.onchange();
                    });
                });
            }
        };
    });

    http://jsfiddle.net/H2EAB/

    • Funciona perfectamente, gracias!
    • He utilizado esta función, porque necesitaba procesar algunos cambios, incluso en el $estado no válido, sin embargo me di cuenta de que el modelo no se actualiza bien. Para otros, retirar el $scope.form.element.$viewValue variable, que debe trabajar. Si tiene un extraño retraso (que hizo por mí), luego hacer una nueva directiva con ningún ámbito, require: 'ngModel', y en lugar de scope.onchange(); anteriormente, el uso de ngModel.$setViewValue(element[0].value);, a continuación, poner el modelo de fijador atributo en su elemento.
    • Estoy pasando por el mismo problema : ng-model no está actualizado aún cuando se ejecuta el onchange(). Antes de intentar JohnDoe a arreglar, voy a echar un vistazo a las prioridades o materias como eso.
    • Esta directiva no es compatible con otros aislar ámbito de aplicación de las directivas tales como ng-unique. Yo usaría algo así como la respuesta a @M’sieur Toph’ dio.
  2. 71

    Puede cambiar el comportamiento de su entrada mediante el uso de ng-model-opciones.

    Acaba de agregar este atributo a la entrada y la ng-evento de cambio de la voluntad de fuego:

          ng-model-options="{allowInvalid: true}"

    ver: https://docs.angularjs.org/api/ng/directive/ngModelOptions

    • Pero si usted agregar este atributo, se debe deshabilitar la funcionalidad de ng-patrón, por lo que sólo podría quitar el ng-patrón y conseguir el mismo efecto.
    • Eso no es correcto. ng-pattern es todavía comportarse de manera normal para mí.
  3. 15

    sólo se necesita añadir

     ng-model-options="{ updateOn: 'default' , allowInvalid:'true'}"

    esto indica que el modelo se puede configurar con los valores que no se valida correctamente, en lugar de que el comportamiento por defecto.

  4. 4

    Inspirado por la Li Yin Kong solución ingeniosa :

    Su solución de una cuestión relativa a la ndModel actualización (ver los comentarios de su post).

    Mi revisión esencialmente cambia el tipo de ámbito de la directiva. Permite que la directiva de acceso al controlador de alcance (y métodos)
    Entonces, watch-change directiva no se necesita una instrucción eval» ( change() ), pero sólo el «nombre del controlador con el método de llamada» (change).

    Y para obtener el nuevo valor de la entrada en esta función, me pase el contexto (esto = la entrada en sí). Así que puede obtener el valor o cualquier propiedad de la misma.

    De esta manera, no nos preocupamos de ngModel actualizaciones (o si el formulario no es válido, lo cual es otro problema de la solución inicial : ngModel se elimina si el formulario no es válido)

    HTML :

    <input type="text" name="textbox" ng-pattern="/^[0-9]+$/" watch-change="change" ng-model="inputtext">

    JAVASCRIPT :

    app.directive('watchChange', function() {
        return {
            restrict : 'A',
            link: function(scope, element, attrs) {
                element.on('input', function(){
                    scope[attrs.watchChange](this);
                })
            }
        };
    });

    DEMO : http://jsfiddle.net/msieurtoph/0Ld5p2t4/

Dejar respuesta

Please enter your comment!
Please enter your name here