Кнопка перезагружает мою страницу, даже если он не отправляет

Альфа: 44

У меня есть проблема с кнопкой в ​​ angular2...

у них, кажется, странное поведение, которое не существует в угловом1 и даже в любом чистом html, это не делает странное поведение

каждый раз, когда я нажимаю на свою кнопку, страница перезагружается... это не кнопка отправки, поэтому она не должна перезагружать страницу!

другое поведение, которое довольно расстраивает в angular2, что большая ошибка заставляет браузер перезагружаться, и мы теряем консольный журнал...

вот код

createPlayer() {
    let p = new PlayerModel('s', 1);
    console.log(p);
}

<form>
    <div class="form-group">
        <label for="name" class="control-label">
            Name:
        </label>

        <input type="text" id="name" class="form-control"/>
    </div>

    <div class="form-group">
        <label for="score" class="control-label">
            Score:
        </label>

        <input type="number" id="score" class="form-control"/>
    </div>

    <div class="form-group">
        <button (click)="createPlayer()" class="btn btn-default">
            Create a Player
        </button>
    </div>
</form>

нет ошибки, пока я делаю процесс с отладчиком в первом выражении, но когда заканчивается кнопка, перезагрузите страницу...

Ответ 1

Если вы не указали иначе, отправкой формы является поведение по умолчанию <button> (я знаю, правильно?). Вы можете избежать этого, не имея form, добавляя type="button" или предотвращая поведение по умолчанию в createPlayer.

Ответ 2

Для других, кому может быть интересно: создайте свою форму следующим образом:

 <form (ngSubmit)="onSubmit()" #feedback="ngForm">

Затем создайте в своем компоненте функцию onSubmit().

В качестве примера перейдите в angular.io и перейдите в раздел Основы/Формы в меню слева, прокрутите вниз и нажмите ссылку "Живое демо".