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 HTML specifications (http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-algorithm) :

If action is the empty string, let action be the document's address of the form document.

But AngularJS refuses to submit the form if the action attribute is not filled. A work-around I found would be to use action="#" but this is not an acceptable solution since I might use the hash and I don't want it to be rewritten.

Has anyone ever experienced this issue ?

Edit : I don't want to use angular for this form, I just want to submit it the "old" way

Answer 1

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 2

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