Angular 5 Button Submit On Enter Key Press

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.

<form (submit)="search(ref, id, forename, surname, postcode)" action="#">
  <mat-card>
    <mat-card-title class="firstCard">Investor/Adviser search</mat-card-title>
    <mat-card-content>
      <p *ngIf="this.noCriteria" class="errorMessage">Please enter search criteria.</p>
      <p *ngIf="this.notFound" class="errorMessage">No investor's or adviser's found.</p>
        <mat-form-field>
          <input matInput id="invReference" placeholder="Investor/Adviser reference (e.g. SCC/AJBS)" #ref>
        </mat-form-field>
        <mat-form-field>
          <input matInput id="invId" placeholder="Investor/Adviser ID" type="number" #id>
        </mat-form-field>
        <mat-form-field>
          <input matInput id="invForname" placeholder="Forename" #forename>
        </mat-form-field>
        <mat-form-field>
          <input matInput id="invSurname" placeholder="Surname" #surname>
        </mat-form-field>
        <mat-form-field>
          <input matInput id="invPostcode" placeholder="Postcode" #postcode>
        </mat-form-field>
    </mat-card-content>
    <mat-card-footer>
      <button mat-raised-button type="submit" class="successButton" id="invSearch" title="Click to perform search.">Search</button>
    </mat-card-footer>
  </mat-card>
</form>

try use keyup.enter or keydown.enter

  <button type="submit" (keyup.enter)="search(...)">Search</button>

In case anyone is wondering what input value

<input (keydown.enter)="search($event.target.value)" />

You could also use a dummy form arround it like:

<mat-card-footer>
<form (submit)="search(ref, id, forename, surname, postcode)" action="#">
  <button mat-raised-button type="submit" class="successButton" id="invSearch" title="Click to perform search." >Search</button>
</form>
</mat-card-footer>

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.

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.

<div (keyup.enter)="login()" class="container-fluid">

Try to use keyup.enter but make sure to use it inside your input tag

<input
  matInput
  placeholder="enter key word"
  [(ngModel)]="keyword"
  (keyup.enter)="addToKeywords()"
/>

Another alternative can be to execute the Keydown or KeyUp in the tag of the Form

<form name="nameForm" [formGroup]="groupForm" (keydown.enter)="executeFunction()" >

type="submit" property alone is not enough.

The important thing for this event is the emphasis to submit the form the old fashioned way.

I mean, it must be in the form tag (submit) and a button that is included in the same form and this button must have the type="submit" property.

The onSubmit function in the first and seventh lines captures the enter key event and the normal mouse click event for you.

However, when you use both, http requests are sent twice. I don't know if this is a bug, but only the function you linked to the form submission is sufficient.

Many of us don't follow this rule when developing with Angular. It allows us to make a basic Accessibility and User Friendly forms.

<form [formGroup]="form" (submit)="onSubmit()">

    <mat-form-field>
        <mat-label>Title</mat-label>
        <input matInput formControlName="title">
    </mat-form-field>

    <button type="submit" mat-raised-button (click)="onSubmit()">
        SUBMIT
    </button>

</form>

Well, there's a small caveat here, I would say. None of the above would work if you want to submit the form until unless you click anywhere on the form or specifically on the input field.

Well if you want to submit the form just by hitting enter without clicking anywhere, you need to declare it globally in html:

<button (window:keypress)="onSomeAction($event)">

and in TS file :

onSomeAction(event){
 if(event.keyCode===13){
   //submit form
 }
}

OR

<button (window:keypress.enter)="onSomeAction($event)">

Just use ngSubmit in combination with a submit button.

<form (ngSubmit)="onSave()" [formGroup]="userForm">
  <!-- ...form inputs -->
    <button class="btn btn-primary type="submit" [disabled]="!userForm.valid">
            Save
    </button>
</form>