typescript - Varför binder ngSubmit till alla knappar i formuläret

Hej, jag har ett ngForm och jag vill kunna lägga till några knappar med olika funktioner. Jag behöver dock också en submit-knapp som tar all formens tillstånd och skickar det till en hanterare.

Mitt problem är att om jag lägger till andra knappar i formuläret, kallas ngSubmit-hanteraren på alla dem (efter deras specifika callbacks)

Exempel

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

Om jag trycker på den sista knappen z_btn kommer submit_Handler att kallas. Men om jag trycker på de två första knapparna (x och y) kallas först deras callback-funktioner (x_Handler och y_Handler) men sedan kallas även submit_Handler. Hur kan jag uppnå separat funktionalitet mellan submit-knappen och de andra knapparna?

Svar #1

Såvitt jag vet kan en type="button" förhindra att den skickas. Du kanske vill titta på detta inlägg https://stackoverflow.com/a/15314160/10567964

Svar #2

Faktiskt, om knappens typ är submit inne i formuläret, så när du klickar på den kommer hela sidan/formuläret att skickas tillbaka, samma sak händer i Angular också. Eftersom du inne i ett formulär sätter alla knappar och binder dem till ett enda ngsubmit, därför kallas det varje gång.

I mitt förslag måste du ta bort det ngsubmit från det formuläret och lägga det inuti z_button, då kommer det bara att anropas när du klickar på z_button, annars kommer det inte att anropas.

tack