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

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

除非您另有说明,否则提交表单是s 的默认行为<button>(我知道,对吧？).您可以通过不包含form,添加type="button"或阻止默认行为来避免这种情况createPlayer.