Angular ng-submit called twice

Question

I have an angular form whose submit method is being hit twice, and I can't figure out why. I'm pretty new to Angular, so it's possible I'm overlooking something fairly simple...

Html:

<div ng-app="RegistrationApp" ng-controller="RegistrationController">
    <form name="accountForm" ng-submit="submitAccount($event, accountForm, account)"  novalidate>

        // inputs here...

        <button type="submit" class="btn btn-success pull-right" ng-disabled="accountForm.$invalid">Submit</button>
    </form>
</div>

Js:

var RegistrationApp = angular.module('RegistrationApp', []);

RegistrationApp.controller('RegistrationController', function ($scope) {

    $scope.submitAccount = function (evt, form, account) {
        console.log('submitAccount() hit'); 
        console.log(evt);
        console.log(form);

        evt.stopPropagation();

        // AJAX code
    });
});

Console Window:

submitAccount() hit 
o.Event {originalEvent: Event, type: "submit", isDefaultPrevented: function, timeStamp: 1394139847226, jQuery210012237170152366161: true…}
c {$error: Object, $name: "accountForm", $dirty: true, $pristine: false, $valid: true…}

submitAccount() hit 
o.Event {originalEvent: Event, type: "submit", isDefaultPrevented: function, timeStamp: 1394139847226, jQuery210012237170152366161: true…}
Constructor {$error: Object, $name: "accountForm", $dirty: true, $pristine: false, $valid: true…}

So, the first thing I tried was to stop propagating the event, but that doesn't have any real effect. After going through the event objects, they're seem identical. The only thing that differs is the 'form' object. The properties are the same, except that one shows that "c" and the other shows "Constructor".

Any ideas what could be causing this to trigger twice? The event target is set to the form element in both cases, and I'm not using any onclick functions, or any other sorts of events in the form.

how are you submitting this form, just clicking the button? And do you have any jQuery code attached to either the form or the button? — Matt Pileggi
– Matt Pileggi, Commented Mar 6, 2014 at 21:15
Submitting via button click, and there is no additional code. — Logan Black
– Logan Black, Commented Mar 6, 2014 at 21:27
This plunkr works fine, there's something more to the story that's not posted in your question. plnkr.co/edit/qdj2tUPGWfpON2XFfvwG?p=preview — Craig Squire
– Craig Squire, Commented Mar 6, 2014 at 21:31

sma · Accepted Answer · 2014-12-03 16:45:26Z

13

Another reason for this occurring (which just happened to me):

I had the following:

<form ng-submit="myCtrl.search()">
   <button type="submit">Search</button>
   <button type="submit" class="mobile-only" ng-click="myCtrl.search()">Go</button>
</form>

I had another button inside the form that was bound to the same function as the ng-submit on its ng-click which was causing the method to be called twice.

answered Dec 3, 2014 at 16:45

sma

9,5978 gold badges53 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Akshay Vijay Jain Over a year ago

in such scenario remove the ng-click, and still when you click the submit button, the function will be called because the button type is submit

Flash Over a year ago

Wow had no Idea i was blaming the backend service

Pascal Le Merrer · Accepted Answer · 2014-03-06 21:17:48Z

12

Check you didn't declare your controller twice: one in the HTML, as I can see above, and another when configuring your routes. If it's the case, the controller is instanciated twice, so the listener is invoked twice

answered Mar 6, 2014 at 21:17

Pascal Le Merrer

6,00122 silver badges35 bronze badges

3 Comments

Logan Black Over a year ago

Right now I'm not configuring any routes. This is just a single page at this time, so what you see up there is really all I have.

Logan Black Over a year ago

Belay that, I was actually loading my App.js twice, so it was duplicating controllers.

Andres Baena Over a year ago

Just if anyone has this same issue. I was putting (ngSubmit)="submit(true)" on the form tag and also (click)="submit()" on the button. Thank you.

Walid Ammar · Accepted Answer · 2014-12-18 23:15:34Z

7

One reason happend to me, I'm not sure if this will happen to any other :)

In my controller I had:

$scope.submit = function() { someThingHere };

In the view

<form ng-submit="submit()">
</form>

This way that form has been submitted "mysteriously" two times, to solve that I had to rename $scope.submit to something else.

answered Dec 18, 2014 at 23:15

Walid Ammar

4,1374 gold badges27 silver badges50 bronze badges

Comments

Leo Armentano · Accepted Answer · 2017-05-18 14:25:59Z

7

There are multiple causes for such behaivour (some of them noted already):

Declaring the controller twice (Check routes, html header, container html (if there is one).
Naming a function submit (Even if i could not reproduce it).
Set a ng-click function on the submit button when you have it already on the form ng-submit, just remove the ng-click. Clicking on the submit button or pressing enter on a input will call the ng-submit function by itself.

Double check them since it's easy to pass them by in some cases

edited May 18, 2017 at 14:25

answered Jul 26, 2016 at 11:06

Leo Armentano

1111 silver badge4 bronze badges

4 Comments

Skrew Over a year ago

The 3rd one was a solution for me. Thanks, slipped my eyes somehow.

Xavi Torrens Over a year ago

The 3rd one was a solution for me too!

Simon Warta Over a year ago

I can reproduce 2 with @Output() submit: EventEmitter<string>

Vincente Over a year ago

Event can be received twice also if it's called "search" : @Output() search: EventEmitter<string>. Then parent component can receive your emitted event and native search event developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/… Renaming the eventEmmiter helps in this case.

Chris Peacock · Accepted Answer · 2022-01-31 12:47:31Z

1

I experienced this in Angular 12 with a reactive form because I had an unnecessary ngForm attribute on the form declaration:

  <form ngForm [formGroup]="formGroup" (ngSubmit)="onSubmit()">

Removing the attribute fixed the problem.

answered Jan 31, 2022 at 12:47

Chris Peacock

4,7563 gold badges31 silver badges27 bronze badges

1 Comment

Ronjark Over a year ago

This was the issue for me! Thank you <3

et3rnal · Accepted Answer · 2018-10-26 05:31:40Z

0

In my case, it was "ng-app" directive which I was not relying on as I manually bootstrap everything.

answered Oct 26, 2018 at 5:31

et3rnal

3424 silver badges18 bronze badges

Collectives™ on Stack Overflow

Angular ng-submit called twice

6 Answers 6

2 Comments

3 Comments

Comments

4 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

3 Comments

Comments

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related