如何防止在ngSubmit上的第二个选项卡上重新加载页面？

Question

我有简单的控制器：

import { Component } from '@angular/core';
import { ItemService } from './item.service';
import { Item } from '../obj/item';
import { FormBuilder, Validators } from '@angular/forms';

@Component({
    selector: 'item-list',
    templateUrl: 'item_list.html',
})

export class ItemListComponent {
    mode = 'Observable';
    items: Item[];
    errorMessage: string;

    public filterForm = this.fb.group({
        someinput: [""],
    });

    constructor(private itemService: ItemService, public fb: FormBuilder) {}

    ngOnInit() {
        this.getData();
    }
    getData() {
    this.itemService.getItems()
            .subscribe(
                items => this.items = items,
                error =>  this.errorMessage = <any>error);
    }
    doSubmit(event) {
        var formData = this.filterForm.value;
        [... aply options to service ...]
        this.getData();
    }
}

和模板：

<div class="row">
  <form [formGroup]="filterForm" (ngSubmit)="doSubmit($event)">
    <input formControlName="someinput" type="text" placeholder="type text">
    <button type="submit">Filter</button>
  </form>
</div>
<div class="row">
    <ul>
        <li *ngFor="let item of items">{{ item.some_field }}</li>
    </ul>
</div>

我在这个网站上打开了两个标签。

当我在输入中键入文本并单击一个选项卡中的提交按钮数据加载正常但第二个选项卡中的站点正在重新加载。为什么？如何防止这种情况？