Угловая остановка Enter Key от отправки

Question

Я пытаюсь остановить Enter от отправки моей кнопки, а вместо этого указать ей другую функцию.Я попытался перехватить Enter через Host Listener, а затем выполнить preventDefault(), чтобы остановить его запуск.

Мой шаблон в моем компоненте выглядит следующим образом:

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

В верхней части кода моего компонента:

export enum KEY_CODE {
  ENTER_KEY = 13
}

Внутри моего класса экспорта:

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

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

Answer 1

События DOM несут полезную информацию с именем $ event. Его можно использовать для любого события ввода, т. Е. (Ввод), (нажатие клавиши), (щелчок) и т. Д.

Можно пропустить использование Hostlistner и применить protectDefault для события $, например:

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

на кнопках:

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

или

HTML:

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

Машинопись:

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

Демо