Angular отправить форму в модальном виде после нажатия enter

Question

Я создаю приложение angular, в котором используется компонент Angular Material Dialog, содержащий форму.

Следующий пример представлен в блоге angular -university но настолько обобщенно c, что может также прекрасно объяснить мою проблему. Форма logi c помещается в теги mat-dialog-content, действия - в mat-dialog-actions. Как я могу изменить это так, чтобы я мог отправить свою форму, нажав клавишу ввода?

шаблон. html

<h2 mat-dialog-title>{{description}}</h2>

<mat-dialog-content [formGroup]="form">

    <mat-form-field>
        <input matInput
                placeholder="Course Description"
               formControlName="description">
    </mat-form-field>
      ....

</mat-dialog-content>

<mat-dialog-actions>
    <button class="mat-raised-button"(click)="close()">Close</button>
    <button class="mat-raised-button mat-primary"(click)="save()">Save</button>
</mat-dialog-actions>

Обычно я получаю эту функцию все оборачивая все тегами form, включая кнопку «Отправить», в этом сценарии это невозможно, поскольку форму необходимо разделить по содержанию и действиям. Это вообще возможно?

Answer 1

Импорт HostListener decorator из angular core. Затем используйте его:

@HostListener(keydown.enter)
someFunc() {
this.save();
}

Answer 2

Быстрое и грязное решение было бы добавить @HostListener примерно так:

@HostListener('document:keydown.enter') 
onEnter() {
    save();
}