How to add buttons without submit the form in Angular?

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

There are three types of buttons:

submit : submits the current form data. (This is default.)
reset : rsets data in the current form.
button : just a button. Its effects must be controlled by something else (that is, with JavaScript).

so you only need to update the type attribut to button

template

<button type="button" mat-raised-button (click)="onCancel($event)">
    cancel
</button>

resources

You can add $event.preventDefault() to button click event

<button mat-raised-button (click)="onCancel($event); $event.preventDefault()">

Related