Angular 5 Button Submit On Enter Key Press

Question

I have an Angular 5 form application using all the usual models but on the forms I want the form to submit without having to physically click on the  Submit  button   I know it s normally as easy as adding type submit to my button element but it does not seem to be working at all   I don t really want to call an onclick function just to get it working  Can anyone suggest anything that I may be missing    lt form  submit   search ref  id  forename  surname  postcode   action     gt     lt mat-card gt       lt mat-card-title class  firstCard  gt Investor Adviser search lt  mat-card-title gt       lt mat-card-content gt         lt p  ngIf  this noCriteria  class  errorMessage  gt Please enter search criteria  lt  p gt         lt p  ngIf  this notFound  class  errorMessage  gt No investor s or adviser s found  lt  p gt           lt mat-form-field gt             lt input matInput id  invReference  placeholder  Investor Adviser reference  e g  SCC AJBS    ref gt           lt  mat-form-field gt           lt mat-form-field gt             lt input matInput id  invId  placeholder  Investor Adviser ID  type  number   id gt           lt  mat-form-field gt           lt mat-form-field gt             lt input matInput id  invForname  placeholder  Forename   forename gt           lt  mat-form-field gt           lt mat-form-field gt             lt input matInput id  invSurname  placeholder  Surname   surname gt           lt  mat-form-field gt           lt mat-form-field gt             lt input matInput id  invPostcode  placeholder  Postcode   postcode gt           lt  mat-form-field gt       lt  mat-card-content gt       lt mat-card-footer gt         lt button mat-raised-button type  submit  class  successButton  id  invSearch  title  Click to perform search   gt Search lt  button gt       lt  mat-card-footer gt     lt  mat-card gt   lt  form gt

User · Answer

Another alternative can be to execute the Keydown or KeyUp in the tag of the Form  lt form name  quot nameForm quot   formGroup   quot groupForm quot   keydown enter   quot executeFunction   quot   gt

User · Answer

In addition to other answers which helped me  you can also add to surrounding div   In my case this was for sign on with user Name Password fields    lt div  keyup enter   login    class  container-fluid  gt

User · Answer

Try to use keyup enter but make sure to use it inside your input tag  lt input   matInput   placeholder  quot enter key word quot      ngModel    quot keyword quot     keyup enter   quot addToKeywords   quot    gt

User · Answer

You could also use a dummy form arround it like    lt mat-card-footer gt   lt form  submit   search ref  id  forename  surname  postcode   action     gt     lt button mat-raised-button type  submit  class  successButton  id  invSearch  title  Click to perform search    gt Search lt  button gt   lt  form gt   lt  mat-card-footer gt    the search function has to return false to make sure that the action doesn t get executed  Just make sure the form is focused  should be when you have the input in the form  when you press enter

User · Answer

In case anyone is wondering what input value   lt input  keydown enter   search  event target value     gt

User · Answer

try use keyup enter or keydown enter     lt button type  submit   keyup enter   search       gt Search lt  button gt

[html] Angular 5 Button Submit On Enter Key Press

Examples related to html

Examples related to angular

Examples related to typescript

Examples related to angular5