CODEWITHSUNDEEP
typescriptangular-forms
Bercovici Adrian
Bercovici Adrian

Reputation: 9370

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 ?

Upvotes: 2

Views: 855

Answers (2)

Nikolai Kiefer
Nikolai Kiefer

Reputation: 613

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

Upvotes: 2

Sagar Kumar Choudhury
Sagar Kumar Choudhury

Reputation: 21

Actually, if the button type is submit inside the form then when u click it it will postback the entire page/form same is happening in angular too. since, inside a form u put the all the buttons and bind them into an single ngsubmit that's why its calling each time.

In my suggestion u have to remove that ngsubmit from that form and put that inside z_button, then it will call only when u click z_button, else it will not call.

thnx

Upvotes: 1

Related Questions