在 Angular 4 中触发输入上的 (keyup.enter) 时防止 (ngSubmit)

Question

这里我有一个包含许多输入的表单。其中之一不是表单生成器的一部分。我正在使用它来创建一些自定义数据。

所以问题是我在这个输入元素上添加了一个 (keyup.ente) 事件，但它触发了表单上的 (ngSubmit) 。

我尝试在（keyup.enter）上添加 event.stopPropagation 但由于某种原因它不起作用。

Answer 1

问题是 是在执行之前<form>处理事件，因此您应该使用on来代替。此外，您应该使用来阻止事件到达（并触发- 事件）。keydown<input>keydown.enter<input>event.preventDefault()<form>submit

应用程序组件.html

<form (ngSubmit)="onSubmit">
  ...
  <input (keydown.enter)="handleKeyEnter($event)">
</form>

应用程序组件.ts

handleKeyEnter(event) {
  event.preventDefault();
  ...
}

演示