Angular仍然提交表单，即使我在处理程序中返回false

Question

我有如下内容：

HTML模板：

<form [action]='endpoint' method="post" target="my_iframe" #confirmForm (ngSubmit)="submitConfirmation()">
<button type="submit" (click)="confirmForm.submit()">Submit</button>
</form>
<iframe name="my_iframe"></iframe>

在组件中：

submitConfirmation() {
return false;
}

我也试过抛出一个错误：

submitConfirmation() {
throw Error('test');
return false;
}

无论我做什么，表格仍然提交！我在网上找到的每个资源告诉我，如果我在提交处理程序中返回false，表单将不会提交。这和iframe有关吗？(这是必需的，因为我不想进入(。这个方法肯定是运行的，我已经检查了三次。

与此相关的是，我真的需要提交按钮上的(click)="confirmForm.submit()吗？

编辑：我刚刚试着删除(click)="confirmForm.submit()，现在我更困惑了！当我删除该绑定时，按钮仍然有效，方法submitConfirmation仍然被调用，但现在无论我是否返回false，表单都无法提交。

Answer 1

只需要在触发事件上preventDefault。您的组件类应该看起来像：

submitConfirmation(event) {
event.preventDefault();
// other stuff
}

要使用它，需要从组件模板传递$event参数：

<form ... (ngSubmit)="submitConfirmation($event)">
<button type="submit">Submit</button>
</form>

无需(click)="confirmForm.submit()。表单中的按钮将默认为submit类型(否则显式设置type="button"(，这将触发(ngSubmit)事件。