web-dev-qa-db-fra.com

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

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 fonction submit()? Et comment éviter ça?

javascriptformsangularsubmit
82
kfa

Je vois deux options pour le résoudre:

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

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

Selon les spécifications 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')
}
164
yurzui

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">
14
Ankit Singh

J'ai constaté qu'avec la version 2.0, (ngSubmit) transfère une valeur d'événement null à la méthode. Vous devez donc utiliser (submit)

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

votre fichier .ts

submit($event){
   /* form code */
   $event.preventDefault();
}
7
imal hasaranga perera

Définissez type = "button" dans le bouton que vous ne souhaitez pas exécuter, soumettez.

5
Alexis Gamarra

J'ai le même problème. Le travail que j'ai trouvé consistait à remplacer button par a et à appliquer un 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>
4
Arun Ghosh

Vous devez importer FormsModule à partir de '@ angular/forms' dans votre app.module.ts.

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