Submitting form does not behave as expected

Question

I am currently haunting another bug as I noticed that the form I am using calls on both buttons the onSubmitClicked() function:

Originally it looked like this:

<button mat-raised-button (click)="onBackClicked()">
  Back
</button>
<button mat-raised-button type="submit">
  Submit
</button>

No matter which button I am clicking, both call onSubmitClicked(). Just the "Back" button call onBackClicked() first. Removing the type="submit" from the "Submit" button does not change anything.

<form [formGroup]="placeInfoForm" (ngSubmit)="onSubmitClicked()">

  <div>
    <mat-form-field style="width: 100%;">
      <input matInput placeholder="Name" formControlName="name"/>
    </mat-form-field>
  </div>

  <div fxLayout="row" fxLayoutAlign="center">
    <button mat-raised-button (click)="onBackClicked()">
      Back
    </button>
    <button mat-raised-button>
      Submit
    </button>
  </div>

</form>

The submit function:

onBackClicked() {
  console.log('onBackClicked()')
}

onSubmitClicked() {
  console.log('onSubmitClicked()');
}

Possible duplicate of [How to prevent buttons from submitting forms](https://stackoverflow.com/questions/932653/how-to-prevent-buttons-from-submitting-forms) — JJJ, Sep 22 '18 at 08:24

score 0 · Accepted Answer · edited Sep 22 '18 at 08:31

0

Any <button> inside the <form> will try to submit the form unless specified explicitly.

Try this:

<button mat-raised-button type="button" (click)="onBackClicked()">
  Back
</button>

edited Sep 22 '18 at 08:31

Stefan Falk

23,898
50
191
378

answered Sep 22 '18 at 08:25

Anand Undavia

3,493
5
19
33

Yes! source: https://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html#the-button-element – Anand Undavia Sep 22 '18 at 08:34

Submitting form does not behave as expected

1 Answers1