I have an Angular JS app with a bootstrap ui modal dialogue hosting a simple edit form. The form can be for a new "thing" or a populated "thing". I find that when I cancel out of the modal with the form populated, submit is being called. Any help appreciated. Plunkr here... http://plnkr.co/edit/XhQCqlGUfcmQOhqLDeXR?p=preview
2 Answers
I forked your plunk and got it working here: http://plnkr.co/edit/jgg5pDQOH46XgrbW3Mvh?p=preview I think the cancel button was participating in the form submit event since it was inside the form element. Moving it outside of the form seems to have fixed the problem. I also set up the submit event to fire the modalInstance close event and the cancel event to fire the modalInstance dismiss event. This gives you the opportunity to handle things appropriately in the parent controller (ModalDemoCtrl).
EDIT
You could also stop the click event from propagating in the cancel event and still use the save as an input element inside the form tag. See this plunk for example: http://plnkr.co/edit/A81KkUUQEL3IBbOSnHQb?p=preview
1 Comment
Jemmitch
Hi. Thanks for responding to this. I had gone down the route of making the submit a button rather than an input. However this bypasses the form tag validation which for this use case would be ok but not for a more complex form.
I was having a similar problem. My problem was that when I clicked in the button to open the modal, my form was submited. I was using a "button" html tag, without specifying the "type" attribute. So, I found your problem and I went to the W3C documentation. I found that:
Tip: Always specify the type attribute for a button element. Different browsers use different default types for the button element. (http://www.w3schools.com/tags/tag_button.asp)
I wasn't defining the type of my button, so the default type of my browser was submit. I defined the type to "button" and everything is ok now.
