Search code examples
typescriptangular-forms

Why does ngSubmit bind to all buttons in the form

Hello i have a ngForm and i want to be able to add to it a couple of buttons with various functionality.However i also need a submit button that takes all the state of the form and sends it to a handler.

My problem is that if i add other buttons in the form , the ngSubmit handler is called on all of them ( after their specific callbacks)

Example

 <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>

If i press on the last button z_btn the submit_Handler will get called.However if i press on the first two buttons (x and y , first their callbacks are called (x_Handler and y_Handler) but then the submit_Handler is also called.How can i achieve separate functionality between submit and other buttons ?

Solution

  • As i am aware a type="button" might stop it from submiting. Might want to look into this Post https://stackoverflow.com/a/15314160/10567964