Angular stop Enter Key from submitting

Question

I am trying to stop the Enter from submitting my button and rather make it point to another function. I tried trapping the Enter via the Host Listener and then do preventDefault() on it to stop it from firing.

My template in my component looks like this:

<mat-dialog-content class="dialog-content">{{data.content | translate}}</mat-dialog-content>
<div>
  <mat-button-toggle-group>
    <button type="button" matDialogClose (click)="dialogRef.close()">{{uppercase }}</button>
    <button type="button" (click)="dialogRef.close(true)" cdkFocusInitial>{{uppercase}}</button>
  </mat-button-toggle-group>
</div>

At the top of my component code:

export enum KEY_CODE {
  ENTER_KEY = 13
}

Inside my export class:

@HostListener('window:keyup', ['$event'])
keyEventUp(event: KeyboardEvent) {

    if (event.keyCode === KEY_CODE.ENTER_KEY) {
      event.preventDefault();
      event.stopPropagation();
      return false;
    }
}

Possible duplicate of [Angular 2: How to prevent a form from submitting on keypress enter?](https://stackoverflow.com/questions/40909585/angular-2-how-to-prevent-a-form-from-submitting-on-keypress-enter) — Heretic Monkey, Apr 25 '18 at 00:45
@Mike McCaughan, there is no form here and it's about Angular Material Dialog — Vega, Apr 25 '18 at 00:52

Vega · Accepted Answer · 2019-01-06T07:00:43.120

24

DOM events carry a payload of information named $event. It's possible to use it on any input event, i.e. (input),(keydown), (click), etc.

It's possible to skip the use of the Hostlistner and apply preventDefault on $event, like so:

(keydown.enter)="$event.preventDefault()"

on the buttons:

...
<button ... (keydown.enter)="$event.preventDefault()" ...>...</button>
...

or:

HTML:

...
<button ... (keydown.enter)="prevent($event)" ...>...</button>
...

Typescript:

...
prevent(event){
 event.preventDefault();
}
...

Demo

edited Jan 06 '19 at 07:00

answered Apr 25 '18 at 00:43

Vega

27,856
27
95
103

1

This is quite interesting. How does the **$event** variable get defined in the code in the context of **(keydown.enter)**? – AlanObject Apr 25 '18 at 01:25
4

@AlanObject, DOM events carry a payload of information named $event. It's possible to use it on any input event, i.e. (input),(keydown), (click), etc. – Vega Apr 25 '18 at 01:28

score 8 · Answer 2 · answered Jun 07 '20 at 15:32

If you are using a form you can prevent it over all using keydown.enter event in the main tag:

<form [formGroup]="..." (keydown.enter)="$event.preventDefault()">
...
</form>

But maybe you want also to prevent some other keys combinations like:

(keydown.enter)="$event.preventDefault()"
(keydown.shift.enter)="$event.preventDefault()"
(keydown.control.enter)="$event.preventDefault()"
(keydown.alt.enter)="$event.preventDefault()"

Angular stop Enter Key from submitting

2 Answers2

Linked