Angular.js: ngForm does not handle 'enter' key.

[mr-moon]

As docs say:

To prevent double execution of the handler, use only one of the ngSubmit or ngClick directives. This is because of the following form submission rules in the HTML specification:

• If a form has only one input field then hitting enter in this field triggers form submit (ngSubmit)
• if a form has 2+ input fields and no buttons or input[type=submit] then hitting enter doesn't trigger submit
• if a form has one or more input fields and one or more buttons or input[type=submit] then hitting enter in any of the input fields will trigger the click handler on the first button or input[type=submit] (ngClick) and a submit handler on the enclosing form (ngSubmit)

However, on practice it does not work this way: http://plnkr.co/edit/NzPVg60xDyexRQHVvecI?p=preview

I have made 6 examples, where it should work, but:

1. The form has one ng-submit directive, and no other nested input[type=button]. Enter should hit the submit() handler, but it doesn't.
2. Same as #1, but without ng-minlength="1" directive.
3. This example already has 1 input[type=submit] element, but it does not work both ways — enter key and mouse click.
4. Same as #3, but ngForm directive is applied to the tag.
5. Form now has 2 inputs, ngSubmit directive is removed from form and added ngClick directive to the input[type=submit]. Enter key does not work, but ngClick does work.
6. Same as #5, but input[type=submit] is replaced with <button></button>. Only mouse click works.

Out of 6 examples, only 2 partially work.

[Narretz]

Related / Duplicates: #3702 #2513

The root problem is that angular does not emulate the behavior of <form> elements when it comes to submitting when you use <ng-form> or <ng-form>. Only real form elements fire the submit event when certain conditions are met. This is simply missing from the implementation. I don't know if it's possible to emulate it completely. Needs quite some event listeners ...

[pkozlowski-opensource]

Yup, this is duplicate of #2513. And as explained in https://github.com/angular/angular.js/issues/2513#issuecomment-39399816 ngForm was never meant to be used _instead_ of the regular <form> elements but rather _inside_ <form> elements to group controls.

[MarkPieszak]

For those still running into this problem, I have an easy fix here that will handle Enter keypress, and fix ngSubmit.

Here's the directive code on github (no jQuery depedencies or anything)

DEMO here

ngForm directive useage: (Automatically calls any input/button with type="submit")

<ng-form>
    <!-- some inputs -->
    <button type="submit"
        ng-click="vmDemo.submitThisForm()">
        Submit Button
    </button>
</ng-form>

ngSubmit functionality fix for ngForm:

<ng-form ng-submit="vmDemo.submitThisForm()">
    <!-- some inputs -->
    <button type="submit">
        Submit Button
    </button>
</ng-form>

Hope this helps others!

[jasonwr]

@MarkPieszak +1