ng-change angularjs

ngChange-like funcionalidad para todo el formulario

Question

Me gustaría hacer un equivalente de ng-change para todo el formulario siempre que haya un cambio en uno de sus campos de entrada.

Sé que desde AngularJS 1.3 tengo la opción de eliminación del rebote, pero se aplica solo para una sola entrada.

Estoy buscando una funcionalidad "antirrebote" / "en cambio" que se aplicará a todo el formulario.

Answer 1

No hay una forma incorporada de hacer ng-change para un formulario.

Puede que ni siquiera sea necesario, porque si organizó su modelo de vista correctamente, entonces las entradas de su formulario probablemente estén vinculadas a una determinada propiedad expuesta en el alcance:

$scope.formData = {};

y en la Vista:

<form name="form1">
  <input ng-model="formData.a">
  <input ng-model="formData.b">
</form>

Luego podría observar en profundidad (con $watch ) los cambios del modelo (y aplicar la opción antirrebote en los elementos que necesite):

$scope.$watch("formData", function(){
  console.log("something has changed");
}, true);

Entonces, el problema es , por supuesto, que se trata de una vigilancia profunda y es costoso. Además, reacciona no solo a los cambios en el Formulario, sino también a un cambio en formData de cualquier fuente.

Entonces, como alternativa, podría crear su propia directiva para complementar el formulario y reaccionar a los eventos de cambio del formulario.

.directive("formOnChange", function($parse){
  return {
    require: "form",
    link: function(scope, element, attrs){
       var cb = $parse(attrs.formOnChange);
       element.on("change", function(){
          cb(scope);
       });
    }
  }
});

y el uso es:

<form name="form1" form-on-change="doSomething()">
  <input ng-model="formData.a">
  <input ng-model="formData.b">
</form>

plunker para la ilustración.

Tenga en cuenta que el evento de "cambio" solo se activa en desenfoque para una entrada de texto, según la documentación de jQuery:

El evento de change se envía a un elemento cuando cambia su valor. Este evento está limitado a elementos <input> , <textarea> cajas y <select> elementos. Para cuadros de selección, casillas de verificación y botones de opción, el evento se dispara inmediatamente cuando el usuario hace una selección con el mouse, pero para los otros tipos de elementos el evento se aplaza hasta que el elemento pierde el foco.

Answer 2

Según el comentario de Eric Soyke, podría conectar el cheque del cambio de formulario en el evento de teclado.

De esta manera, simplemente podría usar la directiva integrada ng-keyup:

<form name="form1" ng-keyup="doSomething()">

Answer 3

Una forma "hacky" de hacer esto es mediante la configuración de un vigilante a la forma sucia, válida dependiendo de sus requisitos, usted puede hacer algo como

   $scope.$watch(''form.$dirty'',function(v){
         if(!v){return}
         form.$setPristine()
         /*do something here*/
    })

esto se ejecutará cada vez que se modifique el formulario, si solo desea ejecutar su código en forma modificada válida, puede hacerlo

       if(!v || form.$invalid){return}

y si solo quiere ejecutar su código cuando el formulario pase a $ estado válido solo necesita configurar su observador para ''formulario. $ válido''

Si no le gusta contaminar su alcance con los observadores, siempre puede crear una directiva alrededor del formulario que expone un evento de API en curso e internamente se ocupa del observador

Answer 4

está bien, super súper tarde respuesta ... pero esto funciona bastante limpio

// html
<form name="$ctrl.form">...</form>

// controller
function $postLink() {
    ctrl.form.$$element.on(''change'', function () {
        console.log(''fired'');
    });
}