角度单选按钮重置无法正常工作答案

【问题标题】：Angular radio button reset not working properly角度单选按钮重置无法正常工作
【发布时间】：2021-06-10 12:11:36
【问题描述】：

我正在为我的表单使用下面的单选按钮

<input type="radio" class="form-check-input" value="1" [checked]="true" name="keys" [(ngModel)]="lostkey.key">One
<input type="radio" name="keys" value="2" [(ngModel)]="lostkey.key" class="form-check-input">Both

我使用以下代码将“一个”单选按钮设置为默认检查

ngOnInit() {
    this.lostkey.key = '1';
}

这是我的重置按钮。这运作良好。所有表格重置。但问题是，默认单选按钮也未选中。因此我在表格重置后重新分配它。但它没有用。

重置按钮（这是正常工作）

<button type="button" class="btn btn-action btn-flat float-right"
    (click)="resetForm(reportlostkeyform)">
    <i class="fas fa-redo"></i> <span> Reset</span>
</button>

这是重置功能

resetForm(reportlostkeyform: NgForm) {
    reportlostkeyform.reset();
    this.lostkey.key = '1';
}

我如何重新分配这个单选按钮的值

【问题讨论】：

你正在混合反应形式和你不应该的ngModel。
那么我如何重置单选按钮
你应该使用formControllerName来绑定值。
我正在使用模板驱动的表单方法

标签： angular

【解决方案1】：

您可以使用这样的初始值重置表单控件

 resetForm(reportlostkeyform: NgForm) {
      reportlostkeyform.reset({keys:'1'});
 }

【讨论】：

【解决方案2】：

尝试重置 setTimeout 中的值；

    resetForm(reportlostkeyform: NgForm) {
        reportlostkeyform.reset();
        setTimeout(() => {
        this.lostkey.key = '1';
       })    
    }

【讨论】：