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.

<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>

you can check it manually by just matching keycode for `enter` which is 13 — Pardeep Jain, May 02 '18 at 07:33
Possible duplicate of [angular2 submit form by pressing enter without submit button](https://stackoverflow.com/questions/37577919/angular2-submit-form-by-pressing-enter-without-submit-button) — ibenjelloun, May 02 '18 at 07:36
I'm not in Angular, but HTML forms are automatically submitting if there is any `````` or ``` — Limbo, May 02 '18 at 07:41
You can add a global key press handler in the javascript: https://stackoverflow.com/questions/40702462/how-to-subscribe-to-global-events-e-g-keypress-in-a-component — John Gilmer, Nov 22 '22 at 12:53

score 216 · Answer 1 · edited Jan 09 '19 at 20:37

216

try use keyup.enter or keydown.enter

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

edited Jan 09 '19 at 20:37

GlennV

3,471
4
26
39

answered May 02 '18 at 07:35

shanhaichik

2,436
2
11
12

In case you are NOT using a FORM - here is solution https://stackoverflow.com/a/71092233/1461862 - it works for dialogs – Mauricio Gracia Gutierrez Feb 12 '22 at 13:25

score 69 · Answer 2 · answered Sep 20 '19 at 23:31

69

In case anyone is wondering what input value

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

answered Sep 20 '19 at 23:31

chris_r

2,039
1
22
22

score 35 · Accepted Answer · edited Jan 04 '20 at 07:13

35

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.

edited Jan 04 '20 at 07:13

javapedia.net

2,531
4
25
50

answered May 02 '18 at 07:37

Tobias Fuchs

910
5
8

I have added the whole HTML from my component as your suggested fixed doesn't submit when I click 'Enter' – murday1983 May 02 '18 at 08:30

score 27 · Answer 4 · answered Dec 02 '19 at 12:59

27

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">

answered Dec 02 '19 at 12:59

andyfinch

1,312
2
19
34

This is simple and works like a charm. – Optimist Rohit Sep 29 '21 at 09:38

score 20 · Answer 5 · edited Dec 14 '20 at 09:38

20

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()"
/>

edited Dec 14 '20 at 09:38

Mario Petrovic

7,500
14
42
62

answered Dec 14 '20 at 08:13

pouria .y

326
2
7

score 6 · Answer 6 · answered Jan 19 '21 at 19:27

6

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

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

answered Jan 19 '21 at 19:27

mQuiroz

1,339
13
11

score 3 · Answer 7 · answered Oct 02 '21 at 03:53

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>

score 2 · Answer 8 · answered Aug 10 '21 at 10:29

2

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)">

answered Aug 10 '21 at 10:29

Kamil Kafoor

256
3
8

Its sufficient at least in ionic project to decorate button with window:keypress event. Thanks Kamil, saved me having to write a @HostListener.. very succinct solution :-) – Kieran Ryan Oct 20 '21 at 11:46
Update: I spoke too soon.. of course window:keypress is too broad.. only interested in "return" key so maybe best to use @HostListener afterall :-) – Kieran Ryan Oct 20 '21 at 15:12
`event.keyCode` is marked as deprecated. use `event.key === 'Enter'` instead of the first example – pcnate Feb 05 '22 at 19:37

umutyerebakmaz · Answer 9 · 2021-04-15T07:18:47.363

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>

Or you could just use (ngSubmit)="onSubmit()" – eddy Oct 02 '21 at 03:44 — eddy, Oct 02 '21 at 03:44

Angular 5 Button Submit On Enter Key Press

9 Answers9

Linked