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

Question

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

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

该指令有一个 HostListener在 keyup 上事件:

@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 在这种情况下也是不必要的，至少从我的(公认的有限)测试来看是这样。 YMMV