É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?

javascript forms angular submit kfa
la source
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')
}
yurzui
la source
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">
Ankit Singh
la source
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();
}
imal hasaranga perera
la source
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.

Alexis Gamarra
la source
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>
Arun Ghosh
la source
6

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

import { FormsModule } from '@angular/forms';
 @NgModule({
  imports: [
    FormsModule
 ],
 })
Marouane Afroukh
la source