Angular / HTML: после нажатия или нажатия Enter вызовите функцию

Question

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

На данный момент мой код выглядит так:

<div class="input-group mb-3">
    <input (keyup)="searchUser($event)" stype="text" class="form-control" placeholder="Suche nach Nachnamen ..."
        aria-label="Recipient's username" aria-describedby="button-addon2">
    <div class="input-group-append">
        <button (click)="searchForUser()" class="btn btn-outline-secondary" type="submit"
            id="button-addon2">Suche</button>
    </div>
</div>

Я уже пытался поместить свой div в <form></form>. Затем вся страница перезагружается.

Answer 1

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

<form (submit)="searchForUser()">

Кроме того, вы можете полностью удалить type = "submit".

Answer 2

Это работает для меня:

<form #p="ngForm" (ngSubmit)="searchForUser(u)">
    <div class="input-group mb-3">
        <input (keyup)="searchUser($event)" stype="text" class="form-control"
            placeholder="Suche nach Nachnamen ..." aria-label="Recipient's username" aria-describedby="button-addon2">
        <div class="input-group-append">
            <button class="btn btn-outline-secondary" type="submit" id="button-addon2">Suche</button>
        </div>
    </div>
</form>

Объяснение: https://angular.io/api/forms/NgForm