Reactive Forms - skip validation on Cancel

Question

I have a reactive form which has Cancel and Submit buttons:

<button (click)="cancel($event)" type="button" class="ui button">Cancel</button>
<button [disabled]="..." type="submit" class="ui button primary">Store</button>

and now if I click on a Submit (Store) button validation kicks in - all good. But if I click on Cancel it also trigger validation. I wonder why? I don't need any validation on Cancel. What do I need to do to turn it off?

Answer 1

You can simply 'reset' the formControls in the parent formGroupon cancel button click if that is okay for you.

cancel() {
 this.form.reset();
}

Answer 2

It works with event.preventDefault()

<button (click)="cancel($event)">Cancel</button>

cancel(event) {
    event.preventDefault()
}