Évitez Angular2 de soumettre systématiquement le formulaire en cliquant sur un bouton


107

Ok alors peut-être que ce n'est pas clair. Obtenez ce formulaire:

<form (ngSubmit)="submit()" #crisisForm="ngForm">
   <input type="text" name="name" [(ngModel)]="crisis.name">
   <button type="submit">Submit</button>
   <button type="button" (click)="preview()">Preview</button>
   <button type="reset" (click)="reset()">Reset</button>
</form>

Pourquoi tous les boutons déclenchent-ils la submit()fonction? Et comment éviter cela?


1
retourner faux; à partir de votre fonction submit ()
Aran Dekar

Réponses:


213

Je vois deux options pour le résoudre:

1) Spécifiez explicitement type = "button" (je pense que c'est plus préférable ):

<button type="button" (click)="preview();">Preview</button>

Selon la spécification W3:

2) Utilisez $event.preventDefault():

<button (click)="preview(); $event.preventDefault()">Preview</button>

ou

<button (click)="preview($event);">Preview</button>

preview(e){
  e.preventDefault();
  console.log('preview')
}

3
(click)="preview(); false"devrait faire de même. Par exemple, stopPropagation()il faudrait appeler explicitement, mais si un gestionnaire d'événements retourne false, il preventDefaultest appelé sur l'événement.
Günter Zöchbauer

1
@ Günter Zöchbauer Merci beaucoup de l'avoir signalé! Tout d'abord, je l'ai essayé mais j'ai écrit return falseet cela n'a pas fonctionné :)
yurzui

1
returnn'est probablement pas autorisé dans les expressions de liaison mais la valeur de la dernière expression est renvoyée implicitement.
Günter Zöchbauer

2
Utiliser le n ° 2 semble la meilleure réponse. L'ajout de: type = "button" à mon bouton a résolu le problème
Michael Washington

1
Je ne connaissais pas type=buttonles spécifications du W3C. Je vous remercie!!
Hugo H

17

Ce Plunker suggère le contraire, chaque bouton semble fonctionner comme prévu.

Cependant, pour empêcher le comportement par défaut du formulaire, vous pouvez le faire,


TS:

submit(e){
 e.preventDefault();
}

Modèle:

<form (submit)="submit($event)" #crisisForm="ngForm">

Merci pour la réponse et le plnkr ... Tout dépend du
kfa

En effet ! c'est. et vous avez défini sur tous les boutons, donc cela fonctionnait comme prévu
Ankit Singh

7

J'ai trouvé qu'avec la version 2.0, (ngSubmit)on passe une nullvaleur d'événement à la méthode, donc à la place, vous devriez nous(submit)

<form (submit)="submit($event)" #crisisForm="ngForm">

votre fichier .ts

submit($event){
   /* form code */
   $event.preventDefault();
}

Je vous remercie! Cela a fonctionné, ne savez pas pourquoi ngSubmit fonctionne lorsqu'il n'est pas utilisé comme groupe de formulaires, mais lorsque je l'utilise comme groupe de formulaires, je dois utiliser votre solution
Nikhil Das Nomula

J'ai donné cette réponse il y a quelque temps lorsque 2.0 vient de sortir, mais après que Angular 2 a parcouru un long chemin, êtes-vous sûr d'utiliser la dernière version?
imal hasaranga perera

6

Définissez type = "bouton" dans le bouton que vous ne souhaitez pas exécuter de soumission.


6

J'ai le même problème. Le travail autour que j'ai trouvé le remplacer buttonavec aet appliquer le style de bouton à l' élément d'ancrage:

<form (ngSubmit)="submit()" #crisisForm="ngForm">
   <input type="text" name="name" [(ngModel)]="crisis.name">
   <button type="submit">Submit</button>
   <a class="btn" (click)="preview()">Preview</a>
   <a class="btn" (click)="reset()">Reset</a>
</form>

6

Vous devez importer FormsModule depuis '@ angular / forms' dans votre app.module.ts

import { FormsModule } from '@angular/forms';
 @NgModule({
  imports: [
    FormsModule
 ],
 })
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.