How to cancel form submission on form with an action attribute?

[Mark Mandel]

Not sure if this is a bug or not.

Taking the example from:

http://docs.angularjs.org/api/angular.module.ng.$compileProvider.directive.ngSubmit

But adding an "action" attribute to the <form> element like so:

http://jsfiddle.net/kExmw/2/

Means that whenever I click the "submit" button, it posts to "/" after it has run the "submit()" function.

According to the documentation:

"Additionally it prevents the default action (which for form means sending the request to the server and reloading the current page)."

Yet, this does not seem to be the case.

Removing the "action" attribute causes the code to work as expected.

Is this a valid bug? Does anyone know of a solution / workaround for this problem?

Thanks in advance,

Mark

[Mark Mandel]

Aaah. I found the relevant documentation:

http://docs.angularjs.org/api/angular.module.ng.$compileProvider.directive.form

"For this reason, Angular prevents the default action (form submission to the server) unless the <form> element has anaction attribute specified."

Well, I have an action attribute, and in certain circumstances, I would like to stop the form from submitting. Is it possible for me to do that?

Mark

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/F951oOG6Gz8J.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.

--
E: mark....@gmail.com
T: http://www.twitter.com/neurotic
W: www.compoundtheory.com

2 Devs from Down Under Podcast

http://www.2ddu.com/

[Igor Minar]

register your own old school "submit" event listener on the form element and return false from it when you want to prevent form submission.

/i

[Mark Mandel]

Okay - sounds like I'll have to do this in some old school jquery then.

Basically I want to throw up a modal window when a user submits the form and it fails a validation rule, and then cancel the form submit so it doesn't bounce them to another window.

It doesn't look like I can do that with Angular?

Thanks for the response.

Mark

[Igor Minar]

Why don't you just disable the submit button when the form is in invalid state? That's much better UX.

Check out "Binding to form and control state" at http://docs.angularjs.org/guide/dev_guide.forms

/i

[Mark Mandel]

Honestly, because I think, in our particular case, it would confuse our users more if we did that - they need something very explicit to know why they are getting it wrong.

Mark

[Igor Minar]

I find it hard to imagine that showing an error message next to the incorrect field would be confusing, but maybe it is.

In that case you can just create a simple directive that will check the state of the form (is it valid or not) and prevent form submission if necessary.

<form name="myForm" custom-prevent-submission="myForm.$error" action="/myurl">

..

</form>

[Mark Mandel]

On Tue, May 29, 2012 at 4:14 PM, Igor Minar <ig...@angularjs.org> wrote:

I find it hard to imagine that showing an error message next to the incorrect field would be confusing, but maybe it is.

Thanks for taking my word for it ;o)

 

In that case you can just create a simple directive that will check the state of the form (is it valid or not) and prevent form submission if necessary.

<form name="myForm" custom-prevent-submission="myForm.$error" action="/myurl">

..

</form>

Ah. Validation seems to be the answer. I will delve deeper into that section of the documentation. Thanks for your time.

Mark

[Noel da Costa]

This makes sense but how would you actually prevent the form submission? By what mechanism?

[Peter Butkovic]

@Noel a bit late to party, but still: onsubmit is your friend here.

See my stackoverflow answer to the similar problem: http://stackoverflow.com/a/27145461/1581069

Dňa nedeľa, 23. marca 2014 9:25:12 UTC+1 Noel da Costa napísal(-a):

[Peter Butkovic]

my bad, wrong stackoverflow reference (I guess I had too many tabs open),here is the correct one: http://stackoverflow.com/a/27159526/1581069

Dňa streda, 26. novembra 2014 22:59:37 UTC+1 Peter Butkovic napísal(-a):