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 ?

return false; from your submit() function – Aran Dekar Feb 10 '17 at 06:14 — Aran Dekar, Feb 10 '17 at 06:14

yurzui · Answer 1 · 2018-08-02T09:19:42.583

256

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')
}

edited Aug 02 '18 at 09:19

answered Oct 18 '16 at 08:39

yurzui

205,937
32
433
399

3

`(click)="preview(); false"` should do the same. For example `stopPropagation()` would need to be called explicitely, but if an event handler returns `false`, then `preventDefault` is called on the event. – Günter Zöchbauer Oct 18 '16 at 08:49
1

@Günter Zöchbauer Thanks very much for pointing this out! Firstly i tried it but i wrote `return false` and it didn't work :) – yurzui Oct 18 '16 at 08:56
1

`return` is probably not allowed in binding expressions but the the value of the last expression is returned implicitly. – Günter Zöchbauer Oct 18 '16 at 09:03
2

Using #2 seems the best answer. Just adding: type="button" to my button solved the problem – Michael Washington Nov 25 '16 at 23:17
In the second example, it seems that the comma is quite necessary after the method called by the event. I had problems without it and had to leave it there – Alexandre N. Dec 01 '16 at 17:22
In this case, I need to pass $event in here too.
. Why that is needed?
– Lead Developer Feb 05 '18 at 15:00
2

I didn't know about `type=button` W3C's spec. Thank you!! – Hugo H Feb 14 '18 at 17:42

Ankit Singh · Answer 2 · 2017-03-18T04:59:44.090

18

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

edited Mar 18 '17 at 04:59

answered Aug 05 '16 at 10:38

Ankit Singh

24,525
11
66
89

Thanks for the answer and the plnkr... It's all about the button type http://plnkr.co/edit/BKIqcz7aKBFQDZioZ5Fy – kfa Aug 05 '16 at 17:12
indeed ! it is. and you have defined on all the buttons, so it was working as intended – Ankit Singh Aug 06 '16 at 04:20

score 13 · Answer 3 · answered Nov 17 '17 at 20:39

13

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

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

answered Nov 17 '17 at 20:39

Marouane Afroukh

2,783
2
14
9

That's the right answer, all others are hacky non angular like uneeded workarounds. – Sebi2020 Dec 24 '21 at 11:01
perfect angular way can't agree more. – Puneet Sharma Mar 05 '23 at 04:08

score 8 · Answer 4 · answered Oct 18 '16 at 07:42

8

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();
}

answered Oct 18 '16 at 07:42

Imal Hasaranga Perera

9,683
3
51
41

Thank you! This worked, dont knwo why ngSubmit works when not used as a form group, but when I use it as a form group i have to use your solution – Nikhil Das Nomula Mar 12 '17 at 15:19
I gave this answer some time back when 2.0 just released, but after that angular 2 has came a long way so are you sure you are using the latest release version ? – Imal Hasaranga Perera Mar 13 '17 at 07:20

Arun Ghosh · Answer 5 · 2017-06-09T05:52:29.390

6

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>

edited Jun 09 '17 at 05:52

answered Aug 05 '16 at 10:36

Arun Ghosh

7,634
1
26
38

score 6 · Answer 6 · answered Jun 08 '17 at 23:47

6

Set type="button" in the button that you don't want to execute submit.

answered Jun 08 '17 at 23:47

Alexis Gamarra

4,362
1
33
23

That's sementically not a good idea. – Sebi2020 Dec 24 '21 at 11:02

score 1 · Answer 7 · answered Apr 04 '21 at 21:32

1

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.

answered Apr 04 '21 at 21:32

Amanjot Singh

138
1
1
10

Avoid Angular2 to systematically submit form on button click

7 Answers7

Linked

Related