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

— kfa
source

1

retourner faux; à partir de votre fonction submit ()

— Aran Dekar

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:

http://w3c.github.io/html-reference/button.html

Un élément de bouton avec aucun attribut de type spécifié représente la même chose que sur un bouton élément avec son jeu d'attribut de type à « soumettre » .

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
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
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
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
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
source

6

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

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

— Marouane Afroukh
source