CODEWITHSUNDEEP
javascriptangularjsdomng-submit
Pablo Armentano
Pablo Armentano

Reputation: 603

Forcing ngSubmit in presence of [action] attribute

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

Upvotes: 2

Views: 520

Answers (2)

vinhboy
vinhboy

Reputation: 8982

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.

Upvotes: 0

hon2a
hon2a

Reputation: 7214

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 () {};
        }
    };
});

Upvotes: 2

Related Questions