如何重置控制值

Question

我试图做一个控制，我们可以输入多个玩家的标记和他们的分数。

但是当我们点击我的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> 

那么我怎样才能重新设置控件的值？

Answer 1

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

Answer 2

根据角度2 docs它看起来像updateValue有一些params像只有self和emitEvent似乎处理验证重置。你尝试过吗？

Answer 3

重置窗体最简单的方法是重建窗体构建器。 点击添加球员按钮

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