How do I perform an actual form post within angular directive?

Question

I know this sounds silly, but I am working on an angular 2 app and at some point in the workflow, I want to submit a <form> using the standard POST method. I do not want to call any AJAX or anything, I simply want to submit the form.

<form action="http://server.com/address/to/submit" method="post">
    <input name="test" value="dummy" type="hidden">
    <button type="submit">Submit</button>
</form>

When I put the above code outside of any directive (so, in the index.html), the form submits as expected.

However, if the above code is inside a directive, it does not submit.

I understand that my angular application would be terminated at the time the user hits submit, but that is OK for my use case.

That was strange. I believe there must be some custom code that prevents it in your application. As you may see in this plunker: http://plnkr.co/edit/cC8GFjrn8i9zq1mwPeMI, the form is still able to be submitted. — Harry Ninh, Aug 11 '16 at 03:41
Interesting! You are obviously correct, your plunker works. At this point, my app is pretty much straight-up angular 2 quickstart. Let me check what versions I am on, just in case it has updated. — Eric Liprandi, Aug 11 '16 at 03:49
Well, i'll be darn, I restarted the node server, got in and out of the developer tools in chrome and it now works! Well, problem solved, thanks! — Eric Liprandi, Aug 11 '16 at 03:52
No worries. I actually was on the other side that had to do extra work to keep the form from being submitted :) — Harry Ninh, Aug 11 '16 at 03:59
And what did you do? because it's back to not submitting again. Frustrating. — Eric Liprandi, Aug 11 '16 at 04:04
Oh it depends on the button type. So if not specified or set to `type='submit'`, it should submit the form; if `type='button'` it should not. Another thing could prevent that default action is adding event to the button, then in your custom function call `preventDefault()` and `return false` — Harry Ninh, Aug 11 '16 at 04:07
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/120748/discussion-between-eric-liprandi-and-harry-ninh). — Eric Liprandi, Aug 11 '16 at 22:00

score 0 · Accepted Answer · edited May 23 '17 at 12:02

After upgrading to 2.0.0-rc.5, things were looking better. However, after enabling the @angular/forms module for another part of the app, it stopped submitting. Turns out I need to use the ngNoForm directive/attribute as explained in this answer.

The documentation is a bit obscure. If you look closely, the selectors lists form:not([ngNoForm]):not([ngFormModel]). I am not a jQuery expert, but this seems to indicate that this directive will not be applied to form elements that have a ngNoForm attribute.

How do I perform an actual form post within angular directive?

1 Answers1