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

Question

你好，我有一个 ngForm，我希望能够向其中添加几个 buttons 和各种 functionality.However 我还需要一个 submit 按钮获取表单的所有状态并将其发送给处理程序。

我的问题是，如果我在表单中添加其他按钮，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 如果我按下前两个按钮（x 和 y，submit_Handler 将得到 called.However ，首先调用它们的回调（x_Handler 和 y_Handler），然后 submit_Handler 也是 called.How 我可以在提交和其他按钮之间实现单独的功能吗？

Answer 1

实际上，如果按钮类型在表单内提交，那么当您单击它时，它会回发整个 page/form angular 中也发生了同样的事情。因为，在一个表单中，你把所有的按钮都放进去，并将它们绑定到一个单独的 ngsubmit 中，这就是它每次调用的原因。

根据我的建议，您必须从该表单中删除 ngsubmit 并将其放入 z_button，然后它只会在您单击 z_button 时调用，否则它不会调用。

thnx

Answer 2

据我所知，type="button" 可能会阻止它提交。可能想看看这个 Post

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

Why does ngSubmit bind to all buttons in the form

typescript

angular-forms