Empty action attribute on a form with angularJS

Question

I\'m trying to submit a form the normal way in a AngularJS application but I encounter an issue : it seems that I must specify the action attribute.

According to the

Answer 1

Normally I simply make button with ng-click handler.

 <button ng-click="Generate()">Submit</button><br>

Answer 2

I created a small directive to solve this:

.directive('form', ['$location', function($location) {
    return {
        restrict:'E',
        priority: 999,
        compile: function() {
            return {
                pre: function(scope, element, attrs){
                    if (attrs.noaction === '') return;
                    if (attrs.action === undefined || attrs.action === ''){
                        attrs.action = $location.absUrl();
                    }
                }
            }
        }
    }
}]);

Seems to be good for me. It looks for a form where the action is empty, and sets it to the current url.

Actually, it doesn't set the action - it sets the attr value, so the actual form directive thinks it's got one.

Update by @Reimund is good - I have actually had to do the same.

New Update - I have added the option to add a noaction attribute to the form element; this enables you to return to a "normal" angular situation. Otherwise this directive will submit forms twice if using ajax.

Answer 3

You can use ng-submit.

Form

<form name="test" action="" ng-submit="submit()">
  What's your name? <input ng-model="name" /><br />
  <button>Send</button>
</form>
<br />
My name is: {{name}}

JS

var app = angular.module('App', []);
app.controller('AppCtrl', function($scope) {
  $scope.submit = function() {
    $scope.name = $scope.name + ' Doe';
  }
});

Plunker http://plnkr.co/edit/rqAwxWmozrzwwj4oAU5k?p=preview

Answer 4

In the library, you can see that Angular listens to the event submit of your forms without action : https://github.com/angular/angular.js/blob/b9fa5c5a6781f4e1ec337f27d55c69db491a6555/src/ng/directive/form.js#L331

You can comment this line, it works, but I'm against editing the code of libraries.

Few lines after, you can see that Angular listening to the event $destroy enabling to remove the action on this event.

Therefore, to avoid modifying Angular, you can just trigger this event of your form:

angular.element(document).ready(function(){
    angular.element(document.querySelector("#loginForm")).triggerHandler("$destroy")‌​; 
});

The reason of this behavior is described few lines above:

we can't use jq events because if a form is destroyed during submission the default action is not prevented.

And the related issue is: https://github.com/angular/angular.js/issues/1238