Angular: как отправить группу форм при нажатой клавише ввода

Question

У меня есть форма, которая отправляет запрос в базу данных для фильтрации некоторых данных в сетке. Форма отправляется при нажатии кнопки «Отправить», но мне нужно, чтобы она также отправлялась при нажатии клавиши ввода.

HTML

<form
            [formGroup]="bmForm"
            (keyup.enter)="onSearchClicked()"
            (ngSubmit)="onSearchClicked()">
            <div class="form-group">
                <div>
                    <label>Full Text Search</label>
                    <input type="name" class="form-control" id="search"
                        formControlName="ftSearch"
                        placeholder="Full Text Search">
                </div>
                <div>
                    <label>Identifier</label>
                    <input type="name" class="form-control" id="search"
                        formControlName="id"
                        placeholder="Identifier">
                </div>
</div>
            <button
                type="submit"
                class="btn btn-primary mr-2"
                (keyup.enter)="onSearchClicked()"
                (keydown.enter)="onSearchClicked()">
                Search
            </button>
</form>

Я пытался использовать (keyup.enter)="onSearchClicked()" в тег < form> & <button> без внесения изменений в Typescript, но безуспешно. В настоящее время вкладка Enter обновляет страницу при нажатии.

Answer 1

Хорошо. взгляните на мой пример: удалите события кнопок, они не нужны. определите событие отправки в вашей форме как (ngSubmit) или определите его только в кнопке. Вам не нужно больше.

<form [formGroup]="searchForm" (ngSubmit)="search()">
        <div class="input-group no-border">
          <input type="text" value="" formControlName="key" class="form-control" placeholder="Search...">

        </div>
      </form>

и это метод поиска:

search() {
    this.alert.info('Not yet implemented!');
  }

Answer 2

Событие keyup отправляется элементу, когда пользователь отпускает клавишу на клавиатуре. Он может быть присоединен к любому элементу, но событие отправляется только на элемент, имеющий фокус.

Ваша кнопка отправки, вероятно, не имеет фокуса при загрузке страницы. Функция никогда не вызывается.

Вы можете принудительно сосредоточить внимание на кнопке, добавив атрибут autofocus, однако это, вероятно, не совсем то, что вам нужно с точки зрения удобства использования (вы, вероятно, захотите, чтобы первый ввод текста был иметь фокус).

Попробуйте переместить keyup.enter к элементу <form>.

<form (keyup.enter)="onSearchClicked()">
  // your form
</form>