Éviter qu'Angular2 ne soumette systématiquement le formulaire au clic d'un bouton

Question

Ok, 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() fonction ? Et comment éviter cela ?

Answer 1

Je vois deux options pour résoudre ce problème :

1) Préciser type="button" explicitement (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 pas d'attribut de type représente la même chose qu'un bouton dont l'attribut type est "submit" .

2) Utiliser $event.preventDefault() :

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

o

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

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

Answer 2

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

Cependant, pour empêcher le comportement par défaut du formulaire, vous pouvez procéder comme suit,

---

TS :

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

Modèle :

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

Answer 3

J'ai constaté qu'avec la version 2.0 (ngSubmit) passe un null à la méthode, vous devez donc utiliser la méthode (submit)

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

votre fichier .ts

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

Answer 4

Set (jeu de mots) type="button" dans le bouton que vous ne voulez pas soumettre à l'exécution.

Answer 5

J'ai le même problème. La solution que j'ai trouvée consiste à remplacer button avec a et appliquer le style 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>