0

I have simple controller:

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();
    }
}

and template:

<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>

and I have two opened tabs with this site.

When I type text in input and click on a submit button in one tab data loading fine but site in second tab is reloading. Why? How to prevent this?

Nips
  • 13,162
  • 23
  • 65
  • 103

0 Answers0