Submit form on pressing Enter with AngularJS

Question

In this particular case  what options do I have to make these inputs call a function when I press Enter      HTML view     lt form gt       lt input type  text  ng-model  name   lt  -- Press ENTER and call myFunc -- gt    gt       lt br   gt       lt input type  text  ng-model  email   lt  -- Press ENTER and call myFunc -- gt    gt   lt  form gt      Controller     controller  mycontroller      scope  function  scope         scope name            scope email              Function to be called when pressing ENTER      scope myFunc   function            alert  Submitted

User · Answer

If you only have one input you can use the form tag.

<form ng-submit="myFunc()" ...>

If you have more than one input, or don't want to use the form tag, or want to attach the enter-key functionality to a specific field, you can inline it to a specific input as follows:

<input ng-keyup="$event.keyCode == 13 && myFunc()" ...>

User · Answer

Will be slightly neater using a CSS class instead of repeating inline styles   CSS  input type submit        position  absolute      left  -9999px      HTML   lt form ng-submit  myFunc    gt       lt input type  text  ng-model  name    gt       lt br   gt       lt input type  text  ng-model  email    gt       lt input type  submit    gt   lt  form gt

User · Answer

Use ng-submit and just wrap both inputs in separate form tags    lt div ng-controller  mycontroller  gt      lt form ng-submit  myFunc    gt       lt input type  text  ng-model  name   lt  -- Press ENTER and call myFunc -- gt    gt     lt  form gt      lt br   gt      lt form ng-submit  myFunc    gt       lt input type  text  ng-model  email   lt  -- Press ENTER and call myFunc -- gt    gt     lt  form gt    lt  div gt    Wrapping each input field in its own form tag allows ENTER to invoke submit on either form  If you use one form tag for both  you will have to include a submit button

User · Answer

If you want to call function without form you can use my ngEnter directive   Javascript   angular module  yourModuleName   directive  ngEnter   function             return function scope  element  attrs                element bind  keydown keypress   function event                    if event which     13                        scope  apply function                            scope  eval attrs ngEnter    event   event                                                 event preventDefault                                                           HTML     lt div ng-app    ng-controller  MainCtrl  gt       lt input type  text  ng-enter  doSomething    gt       lt  div gt    I submit others awesome directives on my twitter and my gist account

User · Answer

If you want data validation too   lt  -- form -- gt   lt form name  loginForm  gt         lt input type  email  ng-keyup   loginForm  valid  amp  amp   event keyCode    13  amp  amp  signIn    ng-model  email       gt     lt input type  password  ng-keyup   loginForm  valid  amp  amp   event keyCode    13  amp  amp  signIn    ng-model  password       gt   lt  form gt    The important addition here is  loginForm  valid which will validate the form before executing function   You will have to add other attributes for validation which is beyond the scope of this question   Good Luck

User · Answer

Very good  clean  and simple directive with shift   enter support   app directive  enterSubmit   function          return           restrict   A           link  function  scope  elem  attrs                elem bind  keydown   function event                     var code   event keyCode    event which                   if  code     13                           if   event shiftKey                                event preventDefault                                scope  apply attrs enterSubmit

User · Answer

FWIW - Here s a directive I ve used for a basic confirm alert bootstrap modal  without the need for a  lt form gt    just switch out the jQuery click action for whatever you like  and add data-easy-dismiss to your modal tag   app directive  easyDismiss   function         return           restrict   A           link  function   scope   element                 var clickSubmit   function  e                    if  e which    13                         element find   type  submit     click                                                   element on  show bs modal   function                       document  on  keypress   clickSubmit                                 element on  hide bs modal   function                       document  off  keypress   clickSubmit

User · Answer

I wanted something a little more extensible semantic than the given answers so I wrote a directive that takes a javascript object in a similar way to the built-in ngClass  HTML  lt input key-bind  quot   enter   go     esc   clear      quot  type  quot text quot  gt  lt  input gt   The values of the object are evaluated in the context of the directive s scope - ensure they are encased in single quotes otherwise all of the functions will be executed when the directive is loaded    So for example  esc    clear    instead of esc   clear   Javascript myModule      constant  keyCodes             esc  27          space  32          enter  13          tab  9          backspace  8          shift  16          ctrl  17          alt  18          capslock  20          numlock  144             directive  keyBind     keyCodes   function  keyCodes            function map obj                var mapped                   for  var key in obj                    var action   obj key                   if  keyCodes hasOwnProperty key                         mapped keyCodes key     action                                              return mapped                             return function  scope  element  attrs                var bindings   map scope  eval attrs keyBind                element bind  quot keydown keypress quot   function  event                    if  bindings hasOwnProperty event which                         scope  apply function                              scope  eval bindings event which

User · Answer

Just wanted to point out that in the case of having a hidden submit button  you can just use the ngShow directive and set it to false like so   HTML   lt form ng-submit  myFunc    gt       lt input type  text  name  username  gt       lt input type  submit  value  submit  ng-show  false  gt   lt  form gt

User · Answer

Angular supports this out of the box  Have you tried ngSubmit on your form element    lt form ng-submit  myFunc    ng-controller  mycontroller  gt      lt input type  text  ng-model  name    gt       lt br   gt       lt input type  text  ng-model  email    gt   lt  form gt    EDIT  Per the comment regarding the submit button  see Submitting a form by pressing enter without a submit button which gives the solution of    lt input type  submit  style  position  absolute  left  -9999px  width  1px  height  1px    gt    If you don t like the hidden submit button solution  you ll need to bind a controller function to the Enter keypress or keyup event   This normally requires a custom directive  but the AngularUI library has a nice keypress solution set up already   See http   angular-ui github com    After adding the angularUI lib  your code would be something like     lt form ui-keypress   13  myFunc  event     gt        input fields      lt  form gt    or you can bind the enter keypress to each individual field   Also  see this SO questions for creating a simple keypres directive  How can I detect onKeyUp in AngularJS   EDIT  2014-08-28   At the time this answer was written  ng-keypress ng-keyup ng-keydown did not exist as native directives in AngularJS   In the comments below  darlan-alves has a pretty good solution with     lt input ng-keyup   event keyCode    13  amp  amp  myFunc         gt

User · Answer

Another approach would be using ng-keypress      lt input type  text  ng-model  data  ng-keypress    event charCode  13   myfunc     return  gt     Submit an input on pressing Enter with AngularJS - jsfiddle

User · Answer

you can simply bind  Hostlistener with the component  and rest will take care by it  It won t need binding of any method from its HTML template   HostListener  keydown     event    onkeydown event keyboardEvent     if event key     Enter                  TODO do something here               form submit   OR API hit for any http method        The above code should work with Angular 1  version

[function] Submit form on pressing Enter with AngularJS

Examples related to function

Examples related to angularjs

Examples related to call

Examples related to keypress

Examples related to enter