angular2 submit form by pressing enter without submit button

Question

Is it possible to submit a form that does not have submit button  by pressing enter   example      lt form  ngFormModel   xxx   ngSubmit   xxxx    gt     lt input   ngModel    lxxR    ngControl  xxxxx   gt   lt  form

User · Answer

Most answers here suggest using something like:

<form [formGroup]="form" (ngSubmit)="yourMethod()" (keyup.enter)="yourMethod()">

</form>

This approach does not result in the form object being marked as submitted. You might not care for this, but if you're using something like @ngspot/ngx-errors (shameless self-promotion) for displaying validation errors, you gonna want to fix that. Here's how:

<form [formGroup]="form" (ngSubmit)="yourMethod()" (keyup.enter)="submitBtn.click()">
  <button #submitBtn>Submit</button>
</form>

User · Answer

Hopefully this can help somebody  for some reason I couldn t track because of lack of time  if you have a form like    lt form  ngSubmit   doSubmit  event   gt     lt button  click   clearForm    gt Clear lt  button gt     lt button type  submit  gt Submit lt  button gt   lt  form gt    when you hit the Enter button  the clearForm function is called  even though the expected behaviour was to call the doSubmit function  Changing the Clear button to a  lt a gt  tag solved the issue for me   I would still like to know if that s expected or not  Seems confusing to me

User · Answer

keyup enter   methodname      this should work and already mentioned in many answers  however that should be present on form tag and not on button

User · Answer

If you want to include both simpler than what I saw here  you can do it just by including your button inside form   Example with a function sending a message                    lt form gt                       lt mat-form-field gt   lt  -- In my case I m using material design -- gt                           lt input matInput  message maxlength  256  placeholder  Message  gt                       lt  mat-form-field gt                       lt button  click   addMessage message value   gt Send message                      lt  button gt                   lt  form gt    You can choose between clicking on the button or pressing enter key

User · Answer

adding an invisible submit button does the trick    lt input type  submit  style  display  none   gt

User · Answer

Maybe you add keypress or keydown to the input fields and assign the event to function that will do the submit when enter is clicked  Your template would look like this      lt form  keydown   quot keyDownFunction  event  quot  gt         lt input type  quot text quot    gt       lt  form  And you function inside the your class would look like this     keyDownFunction event          if  event keyCode     13            alert  you just pressed the enter key               rest of your code

User · Answer

This way is much simple      lt form  formGroup   form   keyup enter   yourMethod form value   gt    lt  form gt

User · Answer

If you want to include both - accept on enter and accept on click then do -     lt div class  form-group  gt       lt input class  form-control    type  text       name  search  placeholder  Enter Search Text                  ngModel    filterdata                keyup enter   searchByText filterdata   gt     lt button type  submit               click   searchByText filterdata    gt      lt  div gt

User · Answer

Always use keydown enter instead of keyup enter to avoid lagging    lt textarea   ngModel    textValue   keydown enter   sendMessage   false   gt  lt  textarea gt    and function inside component ts   textValue   string          sendMessage         console log this textValue       this textValue

User · Answer

Edit      lt form  submit   submit     gt       lt input   gt       lt button type  submit  style  display none  gt hidden submit lt  button gt     lt  form gt    In order to use this method  you need to have a submit button even if it s not displayed  Thanks for Toolkit s answer   Old Answer   Yes  exactly as you wrote it  except the event name is  submit  instead of  ngSubmit     lt form  ngFormModel   xxx   submit   xxxx    gt     lt input   ngModel    lxxR    ngControl  xxxxx   gt   lt  form gt

User · Answer

I prefer  keydown enter   mySubmit    because there won t be added a line break if the cursor was somewhere within a  lt textarea gt  but not at its end

User · Answer

Just simply add  keyup enter   yourFunction

User · Answer

You can also add  keyup enter   xxxx

User · Answer

add this inside your input tag   lt input type  text   keyup enter   yourMethod      gt

[forms] angular2 submit form by pressing enter without submit button

Examples related to forms

Examples related to angular

Examples related to submit