i am building a from with angular forms and it works well with 1 button. But when i want to have 2 buttons, it is hard to handle.
I want to have 1 button reset
and 1 button submit
. reset
must be placed before submit
. Here is the template:
<form (ngSubmit)="submit()" [formGroup]="form">
//inputs...
<button type="submit" (click)="reset($event)">reset</button>
<button type="submit">submit</button>
</form>
When i press enter
in one input, the form
fire both submit()
and reset($event)
function. It is the same when i click on reset
button. My expectation is:
enter
or click submit
button, the form only fire submit()
functionreset
button the form only fire reset()
functionI can find a walk around is adding a hidden button before reset
button and call event.stopPropagation(); event.preventDefault()
in reset()
function. But it is ugly. Is there a clean way to do it? Any help would be appreciated. Many thanks!
yes, multiple submit buttons can include in the html form. One simple example is given below.
Let's learn the steps of performing multiple actions with multiple buttons in a single HTML form: Create a form with method 'post' and set the value of the action attribute to a default URL where you want to send the form data. Create the input fields inside the as per your concern. Create a button with type submit.
In Angular, form controls are classes that can hold both the data values and the validation information of any form element. Every form input you have in a reactive form should be bound by a form control. These are the basic units that make up reactive forms.
You have to set your reset button's type
to button
, not submit
. You have to explicitly set it because default value of attribute type
is submit
:
<form (ngSubmit)="submit()" [formGroup]="form">
//inputs...
<button type="button" (click)="reset($event)">reset</button>
<button type="submit">submit</button>
</form>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With