如何重置控制值？答案

【问题标题】：How to reset Control value?如何重置控制值？
【发布时间】：2018-08-13 12:39:43
【问题描述】：

我正在尝试制作一个控件，我们可以在其中输入带有标签及其得分的多个玩家。

但是当我们单击我的 AddPlayer 按钮时，我创建了一个播放器，然后我需要将表单控件值重置为默认值。

我尝试了很多东西，但没有任何效果......它永远不会改变视图值。

代码如下：

addPlayer(form: ControlGroup) {
    var player = new Player();
    player.tag = form.value.tag;
    player.name = form.value.name;
    player.score = form.value.score;

    // nothing work
    form.value = null;
    form.value.tag = null;
    form.value.tag = '';

    this.playerService.addPlayer(player.tag, player.name, player.score);
    this.newplayer.next(player);
}

这里是html

<form (submit)="addPlayer(playerForm)" [ng-form-model]="playerForm">
    <div class="form-group" [class.has-error]="!playerForm.find('tag').valid && playerForm.find('tag').touched">
        <div class="col-md-3 text-right">
            <label for="tag">Tag: </label>
        </div>

        <input type="text" id="tag" #tag="form" [ng-form-control]="playerForm.controls['tag']"  placeholder="Tag"/>

        <span *ng-if="tag.control.hasError('required') && !tag.control.pristine">Tag is required</span>
    </div>

    <div class="form-group" [class.has-error]="!playerForm.find('name').valid && playerForm.find('name').touched">
        <div class="col-md-3 text-right">
            <label for="name">Player Name: </label>
        </div>

        <input type="text" id="name" #name="form" [ng-form-control]="playerForm.controls['name']" placeholder="Player Name" />

        <span *ng-if="name.control.hasError('required') && !name.control.pristine">Player Name is required</span>
    </div>

    <div class="form-group" [class.has-error]="!playerForm.find('score').valid && playerForm.find('score').touched">
        <div class="col-md-3 text-right">
            <label for="score">Score: </label>
        </div>

        <input type="number" id="score" #score="form" [ng-form-control]="playerForm.controls['score']" value="0" min="0" max="200" />

        <span *ng-if="score.control.hasError('required') && !score.control.pristine">Score is required</span>
    </div>

    <button type="submit" class="btn btn-primary">
        Add Player
    </button>
</form>

那么如何重置控件的值呢？

【问题讨论】：

试试updateValue

标签： angular

【解决方案1】：

要重置表单，最简单的方法是重建表单构建器。点击添加播放器按钮后

this.playerForm = this.builder.group({
        'name': [...],
        'tag': [...],
        'score': [...]
    });

【讨论】：

【解决方案2】：

for(let c in form.controls) {
    form.controls[c].updateValue('');
};

【讨论】：

为避免被删，请说明你的答案。
答案自我解释，IMO ... for 循环将每个表单控件的 updateValue 调用为一个空字符串.... 对我来说似乎已经足够自我解释了 :) 我可能会说，不过，在 for 循环中应该有一个 hasOwnProperty 检查。

【解决方案3】：

根据 angular 2 文档，updateValue 似乎有一些参数，例如只有 self 和 emitEvent 似乎可以处理验证重置。你试过吗？

【讨论】：

添加更多细节