CODEWITHSUNDEEP
angular-ui-bootstrap
Jemmitch
Jemmitch

Reputation: 185

Angular/Bootstrap ui modal dialog with a form issue

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

Upvotes: 0

Views: 561

Answers (2)

Lucas
Lucas

Reputation: 134

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.

Upvotes: 1

Rob J
Rob J

Reputation: 6629

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

Upvotes: 1

Related Questions