Angular2阻止在指令中按下回车键时提交表单

Question

我有一个在 <input type="text" /> 元素上实现的自定义指令：

<form #testForm="ngForm" (ngSubmit)="submit()">
    <input type="text" name="testInput" testDirective />
    <button type="submit">Submit</button>
</form>

指令在keyup 事件上有一个HostListener：

@Directive({
    selector: '[testDirective]'
})
export class TestDirective {
    @HostListener('keyup', ['$event'])
    onkeyup(event: any)
    {
        // Do stuff

        if (event.keyCode == 13) { // 13 = enter
            event.stopPropagation();
            return false;
        }
    }
}

如您所见，我根据其他问题的建议使用了event.stopPropogation() 和return false，但这不起作用，并且当按下回车键时表单仍在提交中。

但是，如果我将(keydown.enter)="$event.preventDefault()" 放在输入元素本身上，它会产生预期的效果并阻止表单提交。

<input type="text" name="testInput" testDirective (keydown.enter)="$event.preventDefault()" />

这种方法对我来说并不是特别理想，因为我想以编程方式控制何时按下回车键禁用表单提交。

有没有人知道为什么 stopPropagation() / return false 方法在这种情况下不起作用？

Answer 1

这个错误只是一个keyup/down错误：

@Directive({
  selector: '[testDirective]'
})
export class TestDirectiveDirective {
  @HostListener('keydown', ['$event']) //keydown, not keyup
  onKeyDown(event: any) {
    // Do stuff
    if (event.keyCode === 13) { // 13 = enter
      return false;
    }
  }
}

顺便说一句，stopPropagation 在这种情况下也是不必要的，至少从我的（诚然有限的）测试来看。 YMMV

Answer 2

您的两种方法之间的区别在于，一种使用event.stopPropogation()，另一种使用event.preventDefault()。请注意，在有效的那个中，您使用的是event.preventDefault()。从Web API docs，Event.stopPropogation 执行以下操作：

防止当前事件在捕获和 冒泡阶段。

换句话说，事件仍然会触发，但不允许冒泡 DOM 树。为了真正停止事件，您需要使用Event.preventDefault，因为您在第二种方法中使用的输出绑定中。另外，来自Web API docs：

[Event.preventDefault] 告诉用户代理如果事件发生 没有得到显式处理，它的默认操作不应该被视为 通常是这样。

基本上，这个onkeyup 函数应该做你想做的事：

  @HostListener('keyup', ['$event'])
  onkeyup(event: any) {
    // Do stuff

    if (event.keyCode == 13) { // 13 = enter
        event.preventDefault();
        return false;
     }
   }

Answer 3

触发是由于您在表单中，并且您单击了提交类型的输入。

删除您的表单标签，通过带有点击事件的按钮更改您的输入，然后您就可以开始了。