Angular.js: ngSubmit activa el envío de formularios en cualquier botón sin type = "button"

Creado en 28 ene. 2014 · 13Comentarios · Fuente: angular/angular.js

Me encontré con un problema en el que angular estaba enviando mi formulario dos veces.

        <div class="text-center">
          <input type="submit" class="btn btn-primary" value="Create" />
          <button class="btn btn-primary" ng-click="close()">Close</button>
        </div>

Ambos botones aquí envían el formulario que resulta en una doble presentación. Me doy cuenta de que el problema tiene que ver con el envío angular del formulario en cualquier botón que no sea type = "button". Agregar ese atributo al botón de cierre lo corrige. No sé si esto es lo que pretendía, pero me desconcertó hasta que lo descubrí, así que decidí llamar la atención.

forms low inconvenient

Fuente

parliament718

👍21

Comentario más útil

Solo desperdicié horas en esto ...

ng-submit solo debe activarse para botones con type = "submit" establecido explícitamente.

soichih en 31 jul. 2014

👍81 👎6 ❤5

Todos 13 comentarios

Creo que esto se explica en los documentos, aunque no se menciona que puede evitar el envío mediante puttint type = "button":

si un formulario tiene uno o más campos de entrada y uno o más botones o entrada [tipo = enviar], presionar enter en cualquiera de los campos de entrada activará el controlador de clic en el primer botón o tipo de entrada

Narretz en 28 ene. 2014

👍43 ❤8 🎉4 👀1

Solo desperdicié horas en esto ...

ng-submit solo debe activarse para botones con type = "submit" establecido explícitamente.

soichih en 31 jul. 2014

👍81 👎6 ❤5

así ... ¿no es así como funciona html?

caitp en 31 jul. 2014

👍12

Oh, así que esta es solo la forma en que el formulario HTML maneja cualquier botón como un botón de envío de forma predeterminada ... nada que ver con Angular (y Angular está usando el evento de envío de formulario para activar ng-submit, lo cual tiene sentido). Me pregunto por qué type = "submit" tiene que existir entonces.

De todos modos ... Me aseguraré de agregar type = "button" en todos los botones a menos que sea un botón de enviar.

soichih en 31 jul. 2014

👍23 😄3

@soichih - sí, tienes razón. ngSubmit solo está reaccionando al evento de envío y el navegador es responsable de activarlo.

En realidad, hay varios escenarios en los que esto puede ocurrir.

Para evitar la doble ejecución del controlador, use solo una de las directivas ngSubmit o ngClick. Esto se debe a las siguientes reglas de envío de formularios en la especificación HTML:
Si un formulario tiene solo un campo de entrada, al presionar Enter en este campo se activa el envío del formulario (ngSubmit)
si un formulario tiene más de 2 campos de entrada y no hay botones o entrada [tipo = enviar], presionar enter no activa el envío
si un formulario tiene uno o más campos de entrada y uno o más botones o entrada [tipo = enviar], presionar enter en cualquiera de los campos de entrada activará el controlador de clic en el primer botón o tipo de entrada

Está documentado aquí: https://docs.angularjs.org/api/ng/directive/form
Deberíamos duplicarlo o hacer una referencia más explícita en los documentos de ngSubmit.

petebacondarwin en 31 jul. 2014

👍4

@petebacondarwin quiere armar un parche rápido para eso?

caitp en 31 jul. 2014

Oh, continúa entonces :-)

petebacondarwin en 31 jul. 2014

¡Muchas gracias por señalar esto! ¡Puede que nunca me hubiera dado cuenta de esto con esta publicación! ¡Salud! - Steve

svanetten1976 en 20 ene. 2015

👍1

Para su información, esto también está sucediendo en Ionic3 .... agregar type = "button" al segundo botón también soluciona el problema

rodneyjoyce en 26 abr. 2017

👍9

gracias soichih

arabindawhiz en 30 ago. 2017

Debe tener cuidado porque si tiene más de un botón, incluso si ha especificado que uno es enviar, se envía en cualquiera de ellos que no tenga el tipo = "botón".