title: Angular: Why does it navigates automatically when clicking the save button
body: <p>I'm not sure to get why is my navigator going back when I click on the "save" button of my project.
  This button should only change a Boolean and console.log "saving!" but remain on the current view and for some reason it goes back a level...</p>
  
  <p>Here's on StackBlitz <a href="https://stackblitz.com/github/ardzii/test" rel="nofollow noreferrer">https://stackblitz.com/github/ardzii/test</a></p>
  
  <p>Here's my template (/src/app/customers/customer-edit/): </p>
  
  <pre><code>&lt;mat-spinner *ngIf="isLoading"&gt;&lt;/mat-spinner&gt;
  
  &lt;form (ngSubmit)="onSubmit()" [formGroup]="customerForm" *ngIf="!isLoading"&gt;
    &lt;div class="btn-row"&gt;
      &lt;button
      mat-raised-button
      type="submit"
      color="accent"&gt;{{ editMode ? "Update Customer" : "Add Customer"}}&lt;/button&gt;
      &lt;button
      mat-raised-button
      routerLink="/customers"
      color="accent"
      [disabled]="savedInfo"&gt;
        Back
      &lt;/button&gt;
    &lt;/div&gt;
  
    &lt;mat-card&gt;
      &lt;mat-tab-group&gt;
          &lt;mat-tab label="Info"&gt;
            &lt;br&gt;
  
            &lt;mat-form-field&gt;
                &lt;input
                matInput
                type="text"
                placeholder="Legal name"
                name="name"
                formControlName="name"&gt;
                &lt;mat-error *ngIf="customerForm.get('name').invalid"&gt;Please enter a valid name&lt;/mat-error&gt;
            &lt;/mat-form-field&gt;
            &lt;mat-form-field&gt;
              &lt;input
              matInput
              type="text"
              placeholder="VAT number"
              name="vat"
              formControlName="vat"&gt;
              &lt;mat-error *ngIf="customerForm.get('vat').invalid"&gt;Please enter a valid VAT number&lt;/mat-error&gt;
            &lt;/mat-form-field&gt;
  
            &lt;p&gt;
              &lt;button
              mat-raised-button
              (click)="onSaveInfo()"&gt;
              Save Info
              &lt;/button&gt;
            &lt;/p&gt;
  
          &lt;/mat-tab&gt;
  
          &lt;mat-tab label="Documents"&gt;
            &lt;mat-list&gt;
                &lt;mat-nav-list&gt;
                  &lt;a mat-list-item (click)="fsPicker.click()"&gt;Upload financial statements&lt;/a&gt;&lt;input type="file" #fsPicker&gt;
                  &lt;a mat-list-item (click)="cdPicker.click()"&gt;Upload the constitutional documents&lt;/a&gt;&lt;input type="file" #cdPicker&gt;
                  &lt;a mat-list-item (click)="idPicker.click()"&gt;Upload the ID&lt;/a&gt;&lt;input type="file" #idPicker&gt;
                  &lt;a mat-list-item (click)="adPicker.click()"&gt;Upload the bank account details&lt;/a&gt;&lt;input type="file" #adPicker&gt;
                &lt;/mat-nav-list&gt;
            &lt;/mat-list&gt;
          &lt;/mat-tab&gt;
        &lt;/mat-tab-group&gt;
  
    &lt;/mat-card&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>and here's the TS file that goes with it (/src/app/customers/customer-edit/): </p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { FormGroup, Validators, FormControl } from '@angular/forms';
  import { ActivatedRoute, ParamMap, Router } from '@angular/router';
  
  import { CustomerService } from '../customer.service';
  import { Customer } from '../customer-model';
  
  @Component({
    selector: 'app-customer-edit',
    templateUrl: './customer-edit.component.html',
    styleUrls: ['./customer-edit.component.css']
  })
  export class CustomerEditComponent implements OnInit {
  
    private id: string;
  
    savedInfo = false;
    isLoading = false;
    name: string;
    vat: string;
    editMode = false;
    customer: Customer;
    customerForm: FormGroup;
  
    constructor(
      private customerService: CustomerService,
      private route: ActivatedRoute,
      private router: Router) { }
  
    ngOnInit() {
      this.isLoading = true;
      this.customerForm = new FormGroup({
        name: new FormControl(null, {validators: Validators.required}),
        vat: new FormControl(null, {validators: Validators.required})
      });
      this.route.paramMap
        .subscribe(
          (paramMap: ParamMap) =&gt; {
            if (paramMap.has('id')) {
              this.editMode = true;
              this.id = paramMap.get('id');
              this.customerService.getCustomer(this.id)
                .subscribe(customerData =&gt; {
                  this.customer = customerData as Customer;
                  this.customerForm.setValue({
                    name: this.customer.name,
                    vat: this.customer.vat
                  });
                  this.isLoading = false;
                });
            } else {
              this.editMode = false;
              this.id = null;
              this.isLoading = false;
            }
        });
    }
  
    onSubmit() {
      if (!this.customerForm.valid) {
        return;
      }
      this.isLoading = true;
      if (!this.editMode) {
        const newCustomer: Customer = {
          id: null,
          name: this.customerForm.value.name,
          vat: this.customerForm.value.vat
        };
        this.customerService.addCustomer(newCustomer);
        this.customerForm.reset();
      } else {
        const updatedCustomer: Customer = {
          id: this.id,
          name: this.customerForm.value.name,
          vat: this.customerForm.value.vat
        };
        this.customerService.updateCustomer(this.id, updatedCustomer);
      }
      this.router.navigate(['/customers']);
    }
  
    onSaveInfo() {
      this.savedInfo = true;
      console.log('Saving info!');
    }
  }
  </code></pre>
  
  <p>I hope it's enough... </p>