按钮正在重新加载我的页面，即使他不是提交

Question

阿尔法：44

angular2 中的按钮目前有问题...

它们似乎有 angular1 中不存在的奇怪行为，即使在任何纯 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>

当我在第一个语句中使用调试器执行过程时没有错误，但是当按钮结束时发生它重新加载页面...

Answer 1

除非您另有说明，否则提交表单是默认 <button> 的行为（我知道，对吧？）。您可以通过不包含 form、添加 type="button" 或阻止 createPlayer.

中的默认行为来避免这种情况

Answer 2

对于可能感兴趣的其他人：像这样创建您的表单：

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

然后在您的组件中创建一个 onSubmit() 函数。

例如，转到 angular.io 并转到左侧菜单上的 Basics/Forms，向下滚动并单击 "Live Demo" link。

按钮正在重新加载我的页面，即使他不是提交

Button is reloading my page even if he's not a submit

angular