ngSubmit fires form submission on any button without type="button"

[parliament718]

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.

[Narretz]

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)

[soichih]

I just wasted hours on this...

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

[caitp]

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

[soichih]

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.

[petebacondarwin]

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

[caitp]

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

[petebacondarwin]

Oh, go on then :-)

[svanetten1976]

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

[rodneyjoyce]

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

[arabindawhiz]

thanks soichih

[fabidefabula]

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

[moniuch]

What if adding type="button" is not a solution because custom button components are used on the form?

[gkalpak]

@moniuch, as explained in the docs, this is done by the browser, not AngularJS. It is standard HTML behavior.