Angular 2 : Pressing the enter key triggers a method and I don't know how to stop it

标签 angular events keypress

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

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

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

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

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

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

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

最佳答案

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

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

关于 Angular 2 : Pressing the enter key triggers a method and I don't know how to stop it,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45816841/

相关文章:

javascript 事件处理程序无法正常工作

Javascript 鼠标事件不适用于 Three.JS 场景元素

javascript - 三个js键盘旋转

javascript - 如何同时检测按键和鼠标悬停

javascript - 搜索引擎,如谷歌搜索

angular2 ngFor 在 ngOnInit() 上从 api 获取数据时不工作

angular - npm ERR! 是什么原因?当我创建 Angular 4 应用程序时,在结束后写?

c# - 为什么 Winforms Click 事件比 MouseClick 事件慢?

css - 如何单独设置 Angular Material 组件的样式?

html - Angular : Cannot locate two p-col-6 side by side in PrimeNG FlexGrid