typescript - 为什么 ngSubmit 会绑定到表单中的所有按钮

你好，我有一个ngForm，我希望能够在其中添加几个具有不同功能的按钮。但是我也需要一个提交按钮，将表单的所有状态发送到处理程序。

我的问题是，如果我在表单中添加其他按钮，ngSubmit 处理程序会在所有按钮上被调用（在它们各自的回调之后）

示例

 <form #myForm="ngForm" (ngSubmit)="submit_Handler()">
    <button id="x_btn" (click)="x_Handler()">X</button>
    <button id="y_btn" (click)="y_Handler()">Y</button>
    <button id="z_btn" >Submit</button>
</form>

如果我按最后一个按钮 z_btn，submit_Handler 会被调用。然而，如果我按前两个按钮（x 和 y），首先它们的回调函数会被调用（x_Handler 和 y_Handler），但随后 submit_Handler 也会被调用。我如何才能实现提交按钮和其他按钮的独立功能？

答案＃1

据我所知，type="button" 可能会阻止提交。你可能想看看这篇帖子 https://stackoverflow.com/a/15314160/10567964

答案＃2

实际上，如果表单中的按钮类型是提交，那么当你点击它时，它会回发整个页面/表单，在 Angular 中也是一样的情况。因为在表单中你把所有按钮放进去并绑定到同一个 ngsubmit，这就是为什么它每次都会被调用。

根据我的建议，你必须从那个表单中移除 ngsubmit，并把它放到 z_button 内部，这样它只会在你点击 z_button 时调用，否则不会调用。

谢谢