Question

我有一个输入字段，单击按钮后，我正在调用一个函数并找回正确的东西。现在，我还希望该函数在按Enter键后调用。

此刻我的代码如下：

<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

Angular / HTML：单击或按Enter后，调用函数

2 个答案: