Forcing ngSubmit in presence of [action] attribute

Question

What Angular says...

[ngSubmit] prevents the default action (which for form means sending the request to the server and reloading the current page), but only if the form does not contain action, data-action, or x-action attributes.

So if you were unable to remove the [action] attribute from HTML, how would you override this behavior to inject custom code on form submittion and prevent the defined [action] to get triggered?

One possible solution is to create a directive and override the DOM property "onsubmit". The CONS here is you are forced to configure it on backend when you could reach the same using the angular attribute

    app.directive("contactForm", function(){

        return {
            link: function( scp, elm, att )
            {
                elm[0].onsubmit = function( evt )
                {
                                                                                                                                                                                                                                                                                /* your custom code here */
                }
            }
        };
    });

Thanks in advance

Answer 1

If you want to remove action before ng-submit gets compiled, just create a directive with a higher priority, that removes the attribute.

app.directive('remove-action', function () {
    return {
        priority: 1,    // ngSubmit has priority 0
        compile: function (element) {
            element.removeAttr('action');
            return function link () {};
        }
    };
});

Answer 2

So I was having a similar problem and here is how I finally solved it.

For angularjs 1.2, it's enough to set action to blank

action = ''

For angularjs 1.3, you have to set action to something like this

action = 'javascript:;'

I am not sure if this is valid html, or best practices, but it does work.