How to add buttons without submit the form in Angular?

Jon Sud picture Jon Sud · Apr 15, 2019 · Viewed 7.6k times · Source

In Angular, how I add button without submit the form?

for example I want to call onCancel without submit the form, but update button should be submit the form, and still keep the ngSubmit.

<form [formGroup]="form" (ngSubmit)="submit()">
    <p>
    <select ...>...</select>
    </p>
    <p>
    <button
        type="submit"
        mat-raised-button
        color="primary">
        update
    </button>
    <button mat-raised-button (click)="onCancel($event)">
        cancel
    </button>
    </p>
</form>

Answer

Sachin Gupta picture Sachin Gupta · Apr 15, 2019

Just add type='button' to it. A button without any defined type in a form acts like a submit button for the form.