How to trigger button by pressing enter in Angular 9

Question

Is it possible to trigger my "Add" button by pressing enter on the keyboard?

////

This is the last div in the form, for the third gap:

  <div fd-form-item *ngIf="targetType.value != null">
    <label fd-form-label for="input-showroom-hostname" [required]="true">URL:</label>
    <fd-form-input-message-group>
      <input
        fd-form-control
        type="text"
        id="input-showroom-hostname"
        placeholder="e.g. l2w.demo.hybris.com"
        formControlName="hostname"
        [state]="determineFormControlState(hostname)"
      />
      <fd-form-message *ngIf="hasRequiredErrors(hostname)" [type]="'error'"> {{ REQUIRED }} </fd-form-message>
      <fd-form-message *ngIf="hasShowroomUserRightsErrors(hostname)" [type]="'error'"> {{ SHOWROOM_USER_RIGHTS }}</fd-form-message>
      <fd-form-message *ngIf="hasPatternErrors(hostname)" [type]="'error'"> {{ URL_PATTERN }} </fd-form-message>
    </fd-form-input-message-group>
  </div>
  <br />
</div>

nothing is required to make it work. `button` elements already trigger `click` handler when you press enter while this button is in focus. No changes needed — Andrei, Jul 27 '20 at 08:07
Can you provide more code from the component.html and component.ts, so we can deduct the context? — Rob Monhemius, Jul 27 '20 at 09:26
It's working fine for me: https://stackblitz.com/edit/angular-ivy-t49oov Is the button disabled, does it have focus? — Rob Monhemius, Jul 27 '20 at 09:52
Sounds like it is unlikely that your button has the focus. A form below? I don't see a form below in your code. Do you want to call `addShowRoom()` without the add button having focus, please elaborate when exactly you want to call the function. — Rob Monhemius, Jul 27 '20 at 10:10
I added the screen of the component. Once all three brackets are filled, the add button is activated and should be also triggered by pressing enter button. — Wojtek R, Jul 27 '20 at 12:52
Does this answer your question? [Calling a function (button) after pressing enter in Angular forms](https://stackoverflow.com/questions/63149636/calling-a-function-button-after-pressing-enter-in-angular-forms) — Liam, Jul 30 '20 at 08:38

Rob Monhemius · Accepted Answer · 2020-07-27T19:52:45.773

Add an event on the last input element and the button. Use (keydown.enter)='add_showroom()' on the last input.

Below is some minimal code of the idea. Also check the StackBlitz if you want.

xx.component.html

<button (click)='add_showroom()'>Add</button><br>
<select>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
</select><br>
<input (keydown.enter)='add_showroom()' type='text'/>

xx.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  public add_showroom() {
    alert('adding showroom');
  }
}

Some extra tips:

Check if the form is valid before processing the enter click.
Add (keydown.enter)='add_showroom()' only to the last element. This is generally speaking better than adding it to an area or multiple elements, because that could lead to unexpected behaviour for someone using enter to navigate somewhere. Or using enter to select a value from a dropdown.
Be very careful using this. Your user may not expect an enter click to submit the form. So UX-wise it is a bit of a grey area. At least notify your user about this behaviour somehow.

score 3 · Answer 2 · answered Jul 27 '20 at 13:03

3

Yes, you should add HostListener Attribute for detecting key press events:

@HostListener('document:keypress', ['$event'])
keyEvent(event: KeyboardEvent) {
    if (event.keyCode === 13) {
        this.addShowroom();
    }
}

answered Jul 27 '20 at 13:03

Anton

31
1
1
3

Just to add one thing here. `keyCode` is deprecated. You can use `event.key === "Enter"` – Wahab Shah Mar 21 '22 at 10:08

How to trigger button by pressing enter in Angular 9

2 Answers2