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

【问题标题】：Angular still submits the form even when I return false in the handler即使我在处理程序中返回 false，Angular 仍会提交表单
【发布时间】：2020-04-07 12:41:09
【问题描述】：

我有类似以下内容：

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，表单都无法提交。

【问题讨论】：

请引用这些在线资源。
@NicholasK 从字面上看，如果你用谷歌搜索我问的问题，你会发现一切。无论如何，这有什么关系？问题是如何防止表单提交？显然上述方法行不通。

标签： javascript html angular

【解决方案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) 事件。

【讨论】：