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

【问题标题】：Button is reloading my page even if he's not a submit按钮正在重新加载我的页面，即使他不是提交者
【发布时间】：2016-08-28 12:21:31
【问题描述】：

阿尔法：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>

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

【问题讨论】：

你也可以使用ng-submit（见第一个例子）给它一个默认动作。

标签： angular

【解决方案1】：

除非您另外指定，否则提交表单是<button>s 的默认行为（我知道，对吗？）。您可以通过不包含 form、添加 type="button" 或阻止 createPlayer 中的默认行为来避免这种情况。

【讨论】：

【解决方案2】：

对于可能感兴趣的其他人：创建您的表单，如下所示：

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

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

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

【讨论】：