Question

Alpha：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”链接。

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

2 个答案: