event.preventDefault（）来自@HostListener的表单元素

Question

我有一个侦听主机组件中表单的submit事件的组件。并且表单具有（ngSubmit）绑定。我想停止表单提交。但是以下操作无效：它命中submit listened，然后还调用submitForm()方法。

@Component({
  selector: 'my-component'
})
export class ComponentClass {

  @HostListener('submit',['$event'])
  public onSubmit(event : Event){
    console.log('submit listened');
    event.preventDefault();
    event.stopPropagation();

  }
}

在主机组件中：

<my-component>
  <form (ngSubmit)="submitForm()">...
  </form>
</my-component>

Answer 1

您使用HostListener是否有任何特定原因？直接调用“ submitForm（）”也可以。在submitForm（）内部，您需要放置诸如“表单是否有效”之类的支票，或者如果不想在单击时触发任何内容，可以将其保留为空。