Avoid Angular2 to systematically submit form on button click

Question

Ok so maybe this is unclear. Get this form:

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

Why do all buttons trigger the submit() function ? And how to avoid that ?

Answer 1

I see two options to solve it:

1) Specify type="button" explicitly (i think it's more preferable ):

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

According to W3 specification:

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

  A button element with no type attribute specified represents the same thing as a button element with its type attribute set to "submit" .

2) Use $event.preventDefault() :

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

or

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

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

Answer 2

This Plunker suggests otherwise, every button seem to work as intended.

However, to prevent default behaviour of the form you can do this,

---

TS:

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

Template:

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

Answer 3

You have to import FormsModule from '@angular/forms' in your app.module.ts

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

Answer 4

I found that with 2.0 release (ngSubmit) is passing a null event value to the method so instead you should us (submit)

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

your .ts file

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

Answer 5

I has the same issue. The work around I found was the replace button with a and apply button style to anchor element:

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

Answer 6

在不想执行提交的按钮中设置type="button" 。

Answer 7

Angular provide a built-in solution for this. You just need to replace the (submit)="handleSubmit()" with (ngSubmit)="handleSubmit()" . By doing this e.preventDefault() will be implicitly called by angular itself under the hood.