在Angular 6中的Form Reset中将单选按钮值重置为零

Question

我有重复的Form，其中我需要显示文本框和单选按钮，并且单选按钮应该始终绑定到"0"或NO按钮。在表单重置时，我试图将单选按钮设置回0，但它不绑定，这是代码，

Radion按钮ts

import {
Component,
ViewChild
} from '@angular/core';
/**
* @title Basic use of `<table mat-table>`
*/
@Component({
selector: 'table-basic-example',
styleUrls: ['table-basic-example.css'],
templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
date = 0;
questionLevel = {
others: [{
date: 0
}],
}
dates = [{
key: "Yes",
value: 1
},
]
constructor() {
if (this.date === 0) {
this.dates.push({
key: "No",
value: this.date
})
}
}
@ViewChild('form') myNgForm;
addMore(item, other) {
console.log(other, "others")
item.others.push({
date: 0,
});
console.log(item.others, "item atfre add new button")
}
SubmitForm(formValues) {
this.myNgForm.resetForm();
if (this.date === null) {
this.dates.splice(1, 1)
this.dates.push({
key: "No",
value: this.date
})
}
}
}

收音机按钮.html

<form class="example-form" #form="ngForm" (ngSubmit)="SubmitForm(form)">
<div *ngFor="let other of questionLevel.others; let i = index ">
<div class="row">
<div class="col-sm-6">
<h6 class="catTitle">Question Title </h6>
</div>
<div class="col-sm-6">
<mat-form-field class="textField">
<textarea required id="#myDiv" name="other_question_{{i}}" [(ngModel)]="other.question" matInput placeholder="Question Title"></textarea>
<mat-error>Question field is required</mat-error>
</mat-form-field>
<!-- <div *ngIf="other.plus" class="error-danger">Question field is required</div> -->
</div>
</div>

<div class="row radio_row">
<div class="col-sm-6">
<h6 class="catTitle">Requires Date</h6>
</div>
<div class="col-sm-6 radio_btn">
<mat-radio-group name="other_date_{{i}}" [(ngModel)]="other.date" required>
<div class="radio_single" *ngFor="let date of dates">
<mat-radio-button [value]="date.value">
{{date.key}}
</mat-radio-button>
</div>
</mat-radio-group>
</div>
</div>
</div>
<div class="form-group">
<button type="button" (click)="addMore(questionLevel,questionLevel.others)" class="primary-button">Add
More Questions</button>
</div>
<button type="submit" [disabled]="!form.valid" mat-raised-button class="primary-button" color="primary">Submit</button>
</form>

<!-- Copyright 2018 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license -->

上面是按钮的代码，用于将所有重复表单的值设置回零。

下面是运行代码的链接。

https://stackblitz.com/edit/angular-ehrv3c-tqsztj

请帮我解决这个

Answer 1

所以我的第一个建议是稍微清理一下逻辑。您应该在日期对象的初始化中添加第二个"否"选项：

dates = [{
key: "Yes",
value: 0
},
{
key: "No",
value: 1
}

然后，您需要有一个selectedDate变量，这样您就可以真正跟踪用户选择的日期。

selectedDate = {};

您应该使用ngOnInit，而不是构造函数生命周期方法，在那里您可以初始化selectedDate字段。

ngOnInit() {
this.selectedDate = this.dates.find((date) => {
return date.key === 'No';
});
}

最后，您可以在提交表单后将所选选项更新为所需的默认选项。

SubmitForm(formValues){
this.myNgForm.resetForm();     
this.selectedDate = this.dates.find((date) => {
return date.key === 'No';
});
}

最后一件事是，在html端更新ngModel值的方式，以便现在正确绑定selectedDate变量。

<mat-radio-group name="other_date_{{i}}" [(ngModel)]="selectedDate" required>
<div class="radio_single" *ngFor="let date of dates">
<mat-radio-button [value]="date">
{{date.key}}
</mat-radio-button>

以下是您提供的代码的更新链接：https://stackblitz.com/edit/angular-ehrv3c-ybdx2m?file=app%2Ftable-basic-example.html.

Answer 2

提交后需要重新设置问题级别。。。像这样的。。

restart(){
this.questionLevel = {
others: [{
date: 0
}
],
}}
constructor(){
if (this.date === 0) {
this.dates.push({ key: "No", value: this.date })
}
this.restart();
}
SubmitForm(formValues){
console.log(this.myNgForm);
this.myNgForm.resetForm();     
if (this.date === null) {
this.dates=[];
this.dates.push({ key: "No", value: this.date })
}
this.restart();
}