Angular router - routes to a weird route "?mat-radio-group-0=true"

Question

I have this close button in my HTML template which fires a close() function in the component: HTML template:

       <div>
          <label id="radio-group-label">Please specify: </label>
          <mat-radio-group
            fxLayout="row"
            aria-labelledby="radio-group-label"
            class="radio-group"
            formControlName="flWholeDay"
          >
            <mat-radio-button [checked]="wholeDayLeave" value="true"
              >Whole day</mat-radio-button
            >
            <mat-radio-button [checked]="!wholeDayLeave" value="false"
              >Part day</mat-radio-button
            >
          </mat-radio-group>
        </div>

HTML button:

<button mat-raised-button fxLayoutAlign="center center" color="accent" (click)="close()">Close</button>

Component:

 close() {
    this.router.navigate(['/something']);
  }

The problem is when the button is pressed it routes to http://localhost:4200/something?mat-radio-group-0=true Where is this odd thing happening?

Answer 1

button elements have a type attribute that defaults to "submit". (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button)

Add type="button" to your button.

<button type="button" mat-raised-button fxLayoutAlign="center center" color="accent" (click)="close()">Close</button>