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

错误只是一个键入/关闭错误：

@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也是不必要的，至少从我的（公认有限的）测试开始。 因人而异

Answer 2

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

防止当前事件在捕获和冒泡阶段进一步传播。

换句话说，事件仍然会触发，但不允许冒泡DOM树。 为了实际停止事件，您希望使用Event.preventDefault ，就像在第二种方法中使用的输出绑定一样。 另外，从Web API文档 ：

[ Event.preventDefault ]告诉用户代理，如果事件没有得到明确处理，则不应该像通常那样采取默认操作。

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

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

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

Answer 3

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

删除您的表单标签，通过单击事件按钮更改您的输入，您将很高兴。