在 Angular4 按钮中重复调用函数

Question

所以，我有一个 angular 这样的输入区域：

<div class="form-group row">
        <div class="col-md-10">
            <pre class="card card-block card-header">Search Publication by id: {{id}}</pre>
            <input type="text"
                   class="form-control"
                   ngui-auto-complete
                   [(ngModel)]="id"
                   [source]="publications"
                   value-formatter="id, title"
                   list-formatter="id, title"
                   />
            <button class="btn btn-primary" (keyup.enter)="search(id.id)" (click)="search(id.id)">Search Publication</button>
         </div>
    </div>

这个想法是让用户可以选择通过键盘或鼠标调用搜索功能。

我发现的问题是调用重复，它为 keyup.enter 调用一次，为点击

调用一次

是否有任何不暗示自定义指令的简单方法可以避免这种情况？

Answer 1

听起来默认的浏览器行为正在复制您的事件 - 当您按下回车键时（当文本输入具有焦点时）会自动触发点击事件。

如果您从按钮中删除 (keyup.enter) 事件，它应该就可以正常工作 - 或者您可以跳过对浏览器的依赖并将该事件添加到输入字段，而不是按钮。

Answer 2

最简单、最干净的方法是创建一个真正的表单，它会响应按钮的单击和按键的按下 "enter"。

<form class="form-group" (ngSubmit)="search('test')">
  <div class="row">
    <div class="col-md-12">
      <div>
        <input type="text" class="form-control"/>
        <button class="btn btn-primary"
                type="submit">
          Search Publication
        </button>
      </div>
    </div>
  </div>
</form>

您要调用的方法在 (ngSubmit) 中有详细说明。按钮必须是 "submit" 类型。

Answer 3

您需要在按下回车后停止事件传播。更改您的代码以使用 (keydown.enter) 而不是 (keyup.enter) 并在该方法之后添加 $event.preventDefault(); 。

<button class="btn btn-primary" 
        (keydown.enter)="search(id.id); $event.preventDefault();" 
        (click)="search(id.id)">Search Publication</button>

Link 到 working demo.

Answer 4

在表单中 Enter 无论如何都会导致按钮触发点击事件，因此只需添加点击处理程序就可以了

<button class="btn btn-primary" (click)="search(id.id)">Search Publication</button>

在 Angular4 按钮中重复调用函数

Duplicated call to function in Angular4 button

angular

keyup