Angular.js: ngSubmit dispara o envio do formulário em qualquer botão sem type = "botão"
Acabei de ter um problema em que o angular estava enviando meu formulário duas vezes.
<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 os botões aqui enviam o formulário, resultando em um envio duplo. Eu percebo que o problema tem a ver com o envio do formulário do Angular em qualquer botão que não seja type = "button". Adicionar esse atributo ao botão Fechar corrige isso. Eu não sei se isso foi intencional, mas fiquei perplexo até que eu descobri e decidi chamar a atenção para isso.
parliament718
Todos 13 comentários
Acho que isso está explicado nos documentos, embora não seja mencionado que você pode impedir o envio com puttint type = "button":
se um formulário tiver um ou mais campos de entrada e um ou mais botões ou entrada [type = enviar], então pressionar enter em qualquer um dos campos de entrada irá acionar o manipulador de cliques no primeiro botão ou input type = submit e um manipulador de submit no formulário delimitador (ngSubmit)
Narretz
em 28 jan. 2014
Eu apenas perdi horas nisso ...
ng-submit só deve ser disparado para botões com type = "submit" definido explicitamente.
soichih
em 31 jul. 2014
não é assim que funciona o html?
caitp
em 31 jul. 2014
Oh, então esta é apenas a maneira como o formulário HTML trata qualquer botão como um botão de envio por padrão ... nada a ver com o Angular (e o Angular está usando o evento de envio de formulário para disparar o ng-submit - o que faz sentido). Eu me pergunto por que type = "submit" tem que existir então?
De qualquer forma ... Certificarei de adicionar type = "button" em todos os botões, a menos que seja um botão de envio.
soichih
em 31 jul. 2014
@soichih - sim, você está certo. ngSubmit está apenas reagindo ao evento de envio e o navegador é responsável por acioná-lo.
Na verdade, existem vários cenários em que isso pode ocorrer.
Para evitar a execução dupla do manipulador, use apenas uma das diretivas ngSubmit ou ngClick. Isso ocorre devido às seguintes regras de envio de formulário na especificação HTML:
- Se um formulário tiver apenas um campo de entrada, pressionar Enter neste campo aciona o envio do formulário (ngSubmit)
- se um formulário tiver mais de 2 campos de entrada e nenhum botão ou entrada [type = submit], então pressionar Enter não aciona o envio
- se um formulário tiver um ou mais campos de entrada e um ou mais botões ou entrada [type = enviar], então pressionar enter em qualquer um dos campos de entrada irá acionar o manipulador de cliques no primeiro botão ou input type = submit e um manipulador de submit no formulário delimitador (ngSubmit)
Ele está documentado aqui: https://docs.angularjs.org/api/ng/directive/form
Devemos duplicar ou referenciá-lo mais explicitamente na documentação do ngSubmit.
petebacondarwin
em 31 jul. 2014
@petebacondarwin quer montar um patch rápido para isso?
caitp
em 31 jul. 2014
Oh, vá em frente então :-)
petebacondarwin
em 31 jul. 2014
Muito obrigado por apontar isso! Eu posso nunca ter percebido isso com esta postagem! Saúde! - Steve
svanetten1976
em 20 jan. 2015
Para sua informação, isso também está acontecendo no Ionic3 .... adicionar type = "button" ao segundo botão também corrige o problema
rodneyjoyce
em 26 abr. 2017
obrigado soichih
arabindawhiz
em 30 ago. 2017
Você deve ter cuidado porque se você tiver mais de um botão, mesmo que tenha especificado que um é enviar, ele será enviado em qualquer um deles que não tenha type = "botão".
fabidefabula
em 13 fev. 2018
E se adicionar type="button" não for uma solução porque os componentes do botão personalizado são usados no formulário?
moniuch
em 15 mar. 2018
@moniuch , conforme explicado nos documentos, isso é feito pelo navegador, não pelo AngularJS. É o comportamento padrão do HTML.
gkalpak
em 15 mar. 2018
Questões relacionadas
cmplank
·
3Comentários
jetta20162
·
3Comentários
brijesh1ec
·
3Comentários
landed1
·
3Comentários
tdumitrescu
·
3Comentários
Comentários muito úteis
Eu apenas perdi horas nisso ...
ng-submit só deve ser disparado para botões com type = "submit" definido explicitamente.