Angular.js: ngSubmit déclenche la soumission de formulaire sur n'importe quel bouton sans type="button"
Je viens de rencontrer un problème où angulaire soumettait mon formulaire deux fois.
<div class="text-center">
<input type="submit" class="btn btn-primary" value="Create" />
<button class="btn btn-primary" ng-click="close()">Close</button>
</div>
Les deux boutons ici soumettent le formulaire, ce qui entraîne une double soumission. Je me rends compte que le problème est lié à la soumission angulaire du formulaire sur n'importe quel bouton qui n'est pas de type = "bouton". L'ajout de cet attribut au bouton de fermeture le résout. Je ne sais pas si c'est prévu, mais cela m'a déconcerté jusqu'à ce que je le comprenne, alors j'ai décidé d'y attirer l'attention.
parliament718
Tous les 13 commentaires
Je pense que cela est expliqué dans la documentation, bien qu'il ne soit pas mentionné que vous pouvez empêcher la soumission par puttint type="button":
si un formulaire a un ou plusieurs champs de saisie et un ou plusieurs boutons ou input[type=submit] alors appuyer sur enter dans l'un des champs de saisie déclenchera le gestionnaire de clic sur le premier bouton ou input type=submit et un gestionnaire de soumission sur le formulaire ci-joint (ngSubmit)
Narretz
le 28 janv. 2014
Je viens de perdre des heures là-dessus...
ng-submit ne doit être déclenché que pour les boutons avec type="submit" défini explicitement.
soichih
le 31 juil. 2014
c'est... pas comment html fonctionne ?
caitp
le 31 juil. 2014
Oh, c'est donc simplement la façon dont le formulaire HTML gère n'importe quel bouton en tant que bouton de soumission par défaut .. rien à voir avec Angular (et Angular utilise l'événement de soumission de formulaire pour déclencher ng-submit - ce qui est logique). Je me demande pourquoi type="submit" doit exister alors?
Quoi qu'il en soit.. Je m'assurerai d'ajouter type="button" sur tous les boutons à moins qu'il ne s'agisse d'un bouton de soumission.
soichih
le 31 juil. 2014
@soichih - oui, tu as raison. ngSubmit réagit simplement à l'événement de soumission et le navigateur est responsable de son déclenchement.
Il existe en fait un certain nombre de scénarios dans lesquels cela peut se produire.
Pour éviter la double exécution du gestionnaire, utilisez une seule des directives ngSubmit ou ngClick. Cela est dû aux règles de soumission de formulaire suivantes dans la spécification HTML :
- Si un formulaire n'a qu'un seul champ de saisie, appuyer sur Entrée dans ce champ déclenche la soumission du formulaire (ngSubmit)
- si un formulaire a plus de 2 champs de saisie et aucun bouton ou entrée [type=soumettre] alors appuyer sur Entrée ne déclenche pas la soumission
- si un formulaire a un ou plusieurs champs de saisie et un ou plusieurs boutons ou input[type=submit] alors appuyer sur enter dans l'un des champs de saisie déclenchera le gestionnaire de clic sur le premier bouton ou input type=submit et un gestionnaire de soumission sur le formulaire ci-joint (ngSubmit)
Il est documenté ici : https://docs.angularjs.org/api/ng/directive/form
Nous devrions soit le dupliquer, soit le référencer plus explicitement dans la documentation ngSubmit.
petebacondarwin
le 31 juil. 2014
@petebacondarwin veut mettre en place un patch rapide pour ça ?
caitp
le 31 juil. 2014
Oh, vas-y alors :-)
petebacondarwin
le 31 juil. 2014
Merci beaucoup de l'avoir signalé ! Je n'aurais peut-être jamais compris cela avec ce post! À votre santé! --Steve
svanetten1976
le 20 janv. 2015
Pour info, cela se produit également dans Ionic3 .... l'ajout de type="button" au 2ème bouton résout également le problème
rodneyjoyce
le 26 avr. 2017
merci soichih
arabindawhiz
le 30 août 2017
Vous devez faire attention car si vous avez plus d'un bouton même si vous avez spécifié qu'il s'agit d'un bouton soumis, il est soumis dans l'un d'entre eux qui n'a pas de type = "bouton".
fabidefabula
le 13 févr. 2018
Que se passe-t-il si l'ajout de type="button" n'est pas une solution car des composants de bouton personnalisés sont utilisés sur le formulaire ?
moniuch
le 15 mars 2018
@moniuch , comme expliqué dans la documentation, cela est fait par le navigateur, pas par AngularJS. C'est un comportement HTML standard.
gkalpak
le 15 mars 2018
Questions connexes
guyandtheworld
·
3Commentaires
landed1
·
3Commentaires
tdumitrescu
·
3Commentaires
cmplank
·
3Commentaires
brijesh1ec
·
3Commentaires
Commentaire le plus utile
Je viens de perdre des heures là-dessus...
ng-submit ne doit être déclenché que pour les boutons avec type="submit" défini explicitement.