angular2 routing - Microsoft Edge adds parameters after navigating to a route on angular 2

Question

I have a form being filled in two steps, the first form fills in the main part of an object and the second, the sub-part. There is a method that navigates back from form2 to form1 that works on Chrome and Firefox, but with Microsoft Edge it seems to add "/?object", and it's something that I'm not doing in code.

my button to go back from form2 to form1

<button class="btn btn-default pull-right" (click)="onCancel()">{{ 'button.back' | translate }}</button>

my method onCancel()

onCancel() {
    this.goal.target = this.target;
    this.service.setGoalToSave(this.goal);
    if (this.isEditing) {
       this.router.navigate(['goals/goalForm', this.goal.goalId.toString()]);
    } else {
       this.router.navigate(['goals/goalForm']);
    }
}

Microsoft Edge navigates to

http://localhost:8080/my-service/?target01=&target02=&target03=&target04=&target05=&target06=&target07=&target08=&target09=&target10=&target11=&target12=&annualTarget=

But that isn't a valid route, so it redirects to my main page.

Anyone knows what is causing this or how can I fix it?

Answer 1

To fix this problem, add type="button" to the button tag. Edge is apparently assuming that any button without an explicit type is type="submit", for which it is posting the values in the form.

I had explicitly included the form tag in my page so that I could access the form properties in the .ts code. I removed that form tag and associated code, and the navigation works in Edge. So Edge seems to be assuming that my button was a submit button. After including type="button" in the button attributes, I was able to put the form tag back in, and it all still worked.