Angular.js: ngSubmit fires form submission on any button without type="button"

Created on 28 Jan 2014 · 13Comments · Source: angular/angular.js

I just ran into an issue where angular was submitting my form twice.

        <div class="text-center">
          <input type="submit" class="btn btn-primary" value="Create" />
          <button class="btn btn-primary" ng-click="close()">Close</button>
        </div>

Both buttons here submit the form resulting in a double submission. I realize the issue has to to with angular submiting the form on any button that is not type="button". Adding that attribute to the close button fixes it. I don't know if this is intended but it baffled me until i figured it out so deciding to bring attention to it.

forms low inconvenient

Source

parliament718

👍21

Most helpful comment

I just wasted hours on this...

ng-submit should only fired for buttons with type="submit" set explicitly.

soichih on 31 Jul 2014

👍81 👎6 ❤5

All 13 comments

I think this is exlpained in th docs, althoughit's not mentioned that you can prevent submission by puttint type="button":

if a form has one or more input fields and one or more buttons or input[type=submit] then hitting enter in any of the input fields will trigger the click handler on the first button or inputtype=submit and a submit handler on the enclosing form (ngSubmit)

Narretz on 28 Jan 2014

👍43 ❤8 🎉4 👀1

I just wasted hours on this...

ng-submit should only fired for buttons with type="submit" set explicitly.

soichih on 31 Jul 2014

👍81 👎6 ❤5

that's.... not how html works?

caitp on 31 Jul 2014

👍12

Oh, so this is just the way HTML form handles any button as a submit button by default.. nothing to do with Angular (and Angular is using form submit event to fire ng-submit - which makes sense). I wonder why type="submit" has to exist then?

Anyway.. I will make sure to add type="button" on all buttons unless it's a submit button.

soichih on 31 Jul 2014

👍23 😄3

@soichih - yes, you are right. ngSubmit is just reacting to the submit event and the browser is responsible for triggering that.

There are actually a number of scenarios when this may occur.

To prevent double execution of the handler, use only one of the ngSubmit or ngClick directives. This is because of the following form submission rules in the HTML specification:

If a form has only one input field then hitting enter in this field triggers form submit (ngSubmit)

if a form has 2+ input fields and no buttons or input[type=submit] then hitting enter doesn't trigger submit

if a form has one or more input fields and one or more buttons or input[type=submit] then hitting enter in any of the input fields will trigger the click handler on the first button or inputtype=submit and a submit handler on the enclosing form (ngSubmit)

It is documented here: https://docs.angularjs.org/api/ng/directive/form
We should either duplicate or more explicitly reference it in the ngSubmit docs.

petebacondarwin on 31 Jul 2014

👍4

@petebacondarwin want to put together a quick patch for that?

caitp on 31 Jul 2014

Oh, go on then :-)

petebacondarwin on 31 Jul 2014

Thank you very much for pointing this out! I might not have ever figured this out with this post! Cheers! -- Steve

svanetten1976 on 20 Jan 2015

👍1

FYI, this is happening in Ionic3 as well.... adding type="button" to the 2nd button also fixes the issue

rodneyjoyce on 26 Apr 2017

👍9

thanks soichih

arabindawhiz on 30 Aug 2017

You have to be careful because if you have more than one button even if you have specified that one is submit, it's submitted in any of them that doesn't have type = "button".