Angular 2:按回车键会触发一个方法,但我不知道如何阻止它

时间:2017-08-22 11:50:22

标签: angular events keypress

我写了一个表格,绑定了一个有角度的2分量。当我在任何文本输入中按下回车键时,它会启动一个绑定到按钮的(单击)事件事件的方法。

这是我按下回车键的文本字段:

<input type="text" class="form-control" name="name" [ngModel]="tutorial.name" #name="ngModel" required>

这是触发的按钮点击方法:

<button class="btn btn-success button-right" (click)="addEasy('')">+</button>

按钮调用&#39; addEasy()&#39;方法。此方法将新的空元素推送到数组。该数组绑定到* ngfor。因此,每当我按下第一个文本输入字段内的输入按钮时,我的* ngFor中会出现另一个空行。

我真的不知道如何解决这个问题。谢谢你的帮助!

2 个答案:

答案 0 :(得分:6)

要阻止表单在输入时提交,请在<form>标记中添加以下内容:

<form (keydown.enter)="$event.preventDefault()"

答案 1 :(得分:0)

您可以在按钮中添加type="button"。这样,您仍然可以使用Enter提交表单。