1

I am following form submission guidelines in the AngularJS documentation, however the form is not being submitted when I hit the Enter key. What do I need to do make this work? Here's my code. The important bit is that I am using ng-click to specify a handler for the submit button:

(Edit 1: Code below edited based on @Pavel Horal's suggestion. Buttons have been moved into the form. Still no luck.)

(Edit 2: This code actually works. You have to be in an input field when you press enter. This solves the issue.)

<div class="modal-body">
    <form>
        <div class="form-group">
            <label for="payee">Payee</label>
            <input type="text" class="form-control" id="payee" placeholder="Enter payee"
                    ng-model="vm.txn.payee" required>
        </div>

        <div class="form-group">
            <label for="memo">Memo</label>
            <input type="text" class="form-control" id="memo" placeholder="Enter memo"
                   ng-model="vm.txn.memo">
        </div>

        ...

        <button type="submit" class="btn btn-info" ng-click="vm.ok()">OK</button>
        <button type="button" class="btn btn-default" ng-click="vm.cancel()">Cancel</button>
    </form>
</div>

<div class="modal-footer">
</div>
Improve this question
2
  • 3
    Your submit button is outside of the <form> element. Submit via Enter key is a feature of a browser, not Angular's. When hitting Enter the browser finds first <input type="submit">, <input type="image"> or <button type="submit"> and submits the form while activating that control . Commented Jun 1, 2015 at 15:10
  • Added my comment as a proper answer. Commented Jun 1, 2015 at 15:25

2 Answers 2

Reset to default
2

Your submit button is outside of the <form> element. Submit via Enter key is a browser feature, not a feature of AngularJS.

When hitting Enter the browser tries to find finds first submit button and submits the form by emulating click event on it. When the submit button is outside of your <form>, browser will do nothing.

For more information you can check the specification of implicit submission.

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

10 Comments

Thanks @Pavel. Code edited based on your suggestion. Still no luck. I think it has something to do with Angular UI Bootstrap. I don't see a good form example in their docs.
Maybe... it works without it (plnkr.co/edit/rRoKz9FJikLOi7K7ZjoV?p=preview) .
@Naresh works with UI Bootstrap as well - plnkr.co/edit/rRoKz9FJikLOi7K7ZjoV?p=preview .
As soon as you add a second input field, the Enter key stops working. This is as documented by the AngularJS Docs in my original question.
Add type="button" to the other button - plnkr.co/edit/wds7t6eiy2RdnOzgjiWn?p=preview. Submit is the default type - developer.mozilla.org/en-US/docs/Web/HTML/Element/… .
|
2

You could simply achieve by adding ng-submit directive on the form level. That will get call on the enter of any of the form level field.

Markup

<div class="modal-body">
    <form ng-submit="vm.ok()">
        <div class="form-group">
            <label for="payee">Payee</label>
            <input type="text" class="form-control" id="payee" placeholder="Enter payee"
                    ng-model="vm.txn.payee" required>
        </div>

        <div class="form-group">
            <label for="memo">Memo</label>
            <input type="text" class="form-control" id="memo" placeholder="Enter memo"
                  ng-enter="" ng-model="vm.txn.memo">
        </div>

        ...
    </form>
</div>
Improve this answer

5 Comments

Thanks pankaj. The ng-submit approach also works, but is there a drawback to it? The docs say that we should use either ng-submit or ng-click, but not both - could this pose a limitation? It seems to me that ng-click provides more granular control.
@Naresh nope..ng-submit looks more proper way of doing angular way validation..in your case you button is outside the form context that why you need to go for ng-click..and this also clarify that you are not using ng-submit with ng-click in same form.in addition you could remove you button type="submit" there is no form element wrapping to it that means it will do nothing..did you find any wrong with mine answer?
Nothing wrong with your answer, Pankaj. It works. I am just trying to evaluate the use of ng-click vs. ng-submit. Note the edited code in my original question - the buttons are now inside the form. With this change I was able to make the ng-click work perfectly.
but personally think that you should use ng-submit no need of ng-click then..only button type should be submit
Thanks. I think that makes sense. I suppose ng-click makes more sense when there are more than one submit actions, e.g. a dialog box that allows you to modify or delete an entity. I upvoted your answer.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.