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

Yo sé que desde AngularJS 1.3 tengo la opción de rebote, pero se aplica sólo para una sola entrada.

Estoy buscando un «rebote»/»en cambio» la funcionalidad que se aplican para todo el formulario.

  • Yo creo que su mejor apuesta es hacer una directiva para todas sus entradas (que quiere de rebote) y establezca el ajuste de rebote no, pero lo dejó pasar la ng-model y otras cosas de sus entradas.
InformationsquelleAutor chenop | 2015-02-23

4 Comentarios

  1. 57

    No hay una manera integrada de hacer ng-change de un formulario.

    Puede incluso no ser necesario, ya que si usted organiza su modelo de vista adecuadamente, entonces su forma de entradas son probablemente vinculado a un determinado ámbito expuestos a la propiedad:

    $scope.formData = {};

    y en la Vista:

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

    Entonces usted podría profundo-reloj (con $watch) por cambios en el modelo (y aplicar cualquier opción de rebote en los elementos que usted necesita):

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

    Entonces el problema es, por supuesto, que esto es un profundo reloj y es caro. También, reacciona no sólo a los cambios en la Forma, sino también a un cambio en formData de cualquier fuente.

    Así que, como alternativa, usted puede crear su propia directiva para complementar el formulario y reaccionan para formar los eventos de cambio.

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

    Nota, que el evento «change» se activa sólo en el desenfoque de una entrada de texto, como por jQuery documentación:

    La change evento es enviado a un elemento cuando cambia su valor. Este evento está limitado a <input> elementos, <textarea> cajas y <select> elementos. Para seleccionar las casillas, casillas de verificación y botones de radio, el evento se desencadena inmediatamente cuando el usuario hace una selección con el ratón, pero para los otros tipos de elementos, el caso es diferido hasta que el elemento pierde el foco.

    • Usted también puede detectar el texto de entrada cambia también la escucha de los eventos de teclado en la directiva, al agregar:element.bind("keydown keypress", function (event) { cb(scope); });
    • También es posible excluir algunos tipos (input, select, botón ect.)? He añadido el evento click y estoy tratando de excluir el tipo de botón. Puedo ver el botón de sesión de la consola.log(attrs);
    • Parece que esto no funciona si se utiliza el angular construido en jqlite variante de jQuery.
  2. 8

    un «chapucero» manera de hacer esto es mediante el establecimiento de un observador a la forma sucia, válido en función de sus requisitos, puedes hacer algo como

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

    se ejecutará cada vez que el formulario sea modificado, si usted sólo desea ejecutar su código válido en la forma modificada puede hacer

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

    y si sólo desea ejecutar su código cuando el formulario pasos a $estado válido sólo necesita configurar su watcher para ‘formulario.$válido’

    si no te gusta a contaminar su alcance con los vigilantes, siempre se puede crear una directiva alrededor de la forma que se expone a un cambio de la api de eventos y cuida internamente, el observador

  3. 7

    Como por Eric Soyke comentario que podría conectar la verificación del cambio de forma en el evento keyup.

    De esta manera usted puede simplemente usar la integrada de la directiva ng-keyup:

    <form name="form1" ng-keyup="doSomething()">
    • +1 Esta es la respuesta que necesitaba, ya que los Nuevos Dev solución fue sólo funciona si el enfoque se pierde (como el ya mencionado) que no da la experiencia de usuario que yo quería. Ty tanto, aunque 🙂
    • No trabajar con la función autocompletar plugins (a menos que el fuego evento keyup).
    • esto no funciona en pegar con el ratón.
  4. 1

    bien, super super tardanza en responderte … pero esto funciona bastante limpio

    //html
    <form name="$ctrl.form">...</form>
    
    //controller
    function $postLink() {
        ctrl.form.$$element.on('change', function () {
            console.log('fired');
        });
    }
    • Esta es de hecho la segunda parte de la aceptación de la respuesta.

Dejar respuesta

Please enter your comment!
Please enter your name here