加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

angular – 如何重置控制值?

发布时间:2020-12-17 18:08:50 所属栏目:安全 来源:网络整理
导读:我正在尝试控制我们可以输入带有标签和分数的多个玩家. 但是当我们单击我的AddPlayer按钮时,我创建了一个播放器,然后我需要将表单控件值重置为默认值. 我已经尝试了很多东西,但没有任何作用….它永远不会改变视图值. 这是代码: addPlayer(form: ControlGrou
我正在尝试控制我们可以输入带有标签和分数的多个玩家.

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

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

解决方法

要重置表单,最简单的方法是重建表单生成器.
??单击添加播放器按钮后

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读