Angular.js submit form old way


I'm migrating an old html page from jQuery to Angular, and it contains some old-school forms with <input type="submit">. When I enriched my pages with the ng-app directive, the old forms stopped working (I mean when you press the submit buttons then nothing happens).

I searched for this problem and scanned the Angular docs too, but it seems that nobody is submitting forms anymore.

Any suggestions on how to bring those forms to life again without much keystrokes would be appreciated.

Currently the form has following markup:

<form name="form_upload" method="post" action="" enctype="multipart/form-data">
<input type="file" name="file">
<input type="submit" name="send" value="Upload">

All jQuery code I purged and starting fresh with Angular.


I guess i now found cause, it's empty action attribute, it seems empty action is not welcomed by standarts, but very convenient to use allowing you to submit form to the current page URL, is there Angular way to do it ?

Problem courtesy of: Dfr


Going off of the docs:

Angular's philosophy is to minimize data and page reloads, so they don't like "old school forms", but you can get around it by using an action attribute in the form.

Angular is designed with single page applications in mind and avoiding full page reloads as that is going to take longer to do. By using the ngSubmit directive, you can define a function to send over the form data to the server and get a response back much quicker than a full page reload. Bytes instead of Kilobytes.

Solution courtesy of: Tim Withers


I've done this. I'm pretty sure I was using jquery to submit the form, but you could probably do it with plain old javascript.

One of the comments on the angular form page suggests this:

<input onclick="javascript:$(this).parent().submit();" type="submit" value="">

Discussion courtesy of: Karen Zilles
  • Use a non-empty action attribute to make Angular submit the form
  • Fill action attribute with current location (using angular)

In your controller:

$scope.location = $window.location.href

In your HTML:

<form action="{{location}}">

See the plunkr demo.

Discussion courtesy of: markmarijnissen

This recipe can be found in it's original form on Stack Over Flow.