Angular-UI $dialog and form submit on enter key

Question

From what I can see, the recomended way to handle enter key in dialogs in AngularJS is to place a <form> tag and a submit button inside the dialog.

Fair enough, but if you use Angular-UI and their $dialog service, the form will simply close silently when pressing enter. no way to intercept that. even if you attach handlers to ng-click or ng-submit, the form will just close w/o returning any result.

Is there something else I need to do

[Edit]

Solved it, I had to specify explicitly that my "cancel" button was of type "button". Seems like it defaults to "submit" ?

So there was no real problem except for my html form skills :)

Could you show some of your code (and maybe a plunkr or jsfiddle link) I haven't tried this particular combination yet but it sounds like it should work (perhaps there's a dialog option that needs to be set to prevent it from closing itself on keypress and to only close when explicitly closed in code). — shaunhusain
– shaunhusain, Commented Jul 9, 2013 at 16:07
Cool if you didn't find a similar SO post you should answer your own question and show what went wrong, for future you and everyone else. — shaunhusain
– shaunhusain, Commented Jul 9, 2013 at 16:22
„specify explicitly that my "cancel" button was of type "button"“… @RogerAlsing made my day :) — xlttj
– xlttj, Commented Sep 8, 2016 at 12:38

Roger Johansson · Accepted Answer · 2013-08-22 13:06:44Z

33

To answer my own question. Buttons seems to default to submit(?) and if I explicitly set them to type="button" then they will not trigger postback when pressing enter in an form input field.

<form>
     <input type="text" ... />
     <button type="button" ng-click=...>Cancel</button>
     <button type="submit" ng-click=...>OK</button>
</form>

this way, pressing the enter key in the input field will trigger the ng-click for the OK button.

And as you html hackers have already understood, this had nothing to do with dialogs nor angularjs really, it was a html form issue and my lack of web skills...

answered Aug 22, 2013 at 13:06

Roger Johansson

23.3k18 gold badges108 silver badges206 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sabin Bogati · Accepted Answer · 2019-06-06 06:23:42Z

1

I believe it's because your "CLOSE" button, is not set to type="button", and I THINK that's the first element that has focus, so when pressing enter, you are entering that button, which by default, will submit the form. Add type="button" and that should solve it.

Also for the record, the latest version of angular material has md-button automatically add type="button" by default (unless you specify type="submit") to avoid this type of situation

answered Jun 6, 2019 at 6:23

Sabin Bogati

7418 silver badges11 bronze badges

1 Comment

Roger Johansson Over a year ago

Why answer on an 5 year old question that already have the same answer that you provided?

Collectives™ on Stack Overflow

Angular-UI $dialog and form submit on enter key

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related