When the cancel button is triggered from within a form which executes route change, component change is temporarily paused?

Question

I would like to give user the chance to hit cancel on a form. This component only has the form displayed. I would like to put the cancel button inside of the form so it sits next to the submit button, but when user triggers the cancel button, I want to change routes and display the about component.

Whenever I try any of these:

`
onCancel(){    
    return this.location.back();
  }
`

`
onCancel(){    
    return this.router.navigate(['/about']);
  }
`

`
<mat-card-actions>
      <button mat-raised-button [disabled]="!contactForm.valid" color="primary" type="submit">Submit</button>
      <button mat-raised-button color="warn" routerLink="/about">Cancel</button>
    </mat-card-actions>
`

The transition of the route is temporarily paused, the URL on the page changes to the correct path, however it appends a ? right after the about? path, and then after about 2 seconds it changes the route.

How can I include the cancel button in the form?

Here is what is happening

[Possible Duplicate here](https://stackoverflow.com/questions/35446955/how-to-go-back-last-page) — Sourav Dutta, Apr 13 '19 at 18:27
This is specific to having the cancel button in a form. This does not happen when it is not in the form. — O.MeeKoh, Apr 13 '19 at 18:28
hmm how would that be any different than having `routerLink` directly in the button? — O.MeeKoh, Apr 13 '19 at 18:38
can you provide your code in [stackblitz](https://stackblitz.com) — Sourav Dutta, Apr 13 '19 at 18:43
*and then after about 2 seconds it changes the route* - are you using route guards ? are you resolving anything prior to navigating ? — Stavm, Apr 13 '19 at 18:53
No route guards, its very simple. Form with two buttons, one for submitting one for cancel. When I use location.back() the alert that is hooked up to be fired for the on submit handler triggered. So it seems like it is actually submitting it. It doesnt of course happen when the cancel button is outside of the form. — O.MeeKoh, Apr 13 '19 at 19:03
Have you tried to put `type="button"` on your cancel button? The default behavior may be `type="submit"` which would cause the click to trigger the form submission. https://www.w3schools.com/tags/att_button_type.asp — Daniel W Strimpel, Apr 13 '19 at 19:31

score 0 · Answer 1 · answered Apr 14 '19 at 15:10

Just wanted to answer this question because Daniel W Strimpel figured it out. The problem was that I had not set explicitly the type on the cancel button. By default it was set to "type=submit", when I changed it to "type=button" it all worked as expected.

When the cancel button is triggered from within a form which executes route change, component change is temporarily paused?

1 Answers1