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

【问题标题】：Angular/ HTML: After click or press Enter call a functionAngular/ HTML：单击或按 Enter 后调用函数
【发布时间】：2019-04-26 15:14:37
【问题描述】：

我有一个输入字段，单击按钮后，我正在调用一个函数并取回正确的内容。现在我还希望该函数在按回车后调用。

目前我的代码如下所示：

<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>。然后整个页面正在重新加载。

【问题讨论】：

您的按钮属于提交类型，因此需要重新加载
嗨@lisa，页面重新加载，因为按钮尝试提交表单。您应该将该表单绑定到 ngForm（模板驱动）或 FormGroup（响应式表单）。然后在表单上监听提交事件。这样，当点击回车键和点击按钮时，你的函数就会被调用
感谢@YusuffBisiriyu。这是有效的。我发布我的解决方案

标签： html angular button submit

【解决方案1】：

将输入和按钮包装在表单标签中，而不是在按钮上使用单击处理程序，而是将其作为表单元素上的提交处理程序。

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

或者，您可以完全删除 type="submit"。

【讨论】：

还是同样的问题。我将我的解决方案添加为答案

【解决方案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

【讨论】：