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>

Purdum

Yes, it's : (keydown.enter)="addShowroom()" – Substantialize

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

Can you provide more code from the component.html and component.ts, so we can deduct the context? – Thermel

I've added full html – Purdum

It's working fine for me: stackblitz.com/edit/angular-ivy-t49oov Is the button disabled, does it have focus? – Thermel

Button is activated once the form below is filled out – Purdum

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. – Thermel

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. – Purdum

Does this answer your question? Calling a function (button) after pressing enter in Angular forms – Airmail

Answer 1

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.

Thermel

Answer 2

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

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

Deafen

Just to add one thing here. keyCode is deprecated. You can use event.key === "Enter" – Jocularity