Angular Reactive Form中的FormArray在表单提交时未重置

Question

我试图使用反应式表单在表单中创建多选复选框列表，但遇到了一个问题，即我创建的用于存储所选复选框值的FormArray在提交时没有与表单的其他部分一起重置。这导致了一个具有多个null值的数组，这些null值对应于以前提交的内容。

相关的html代码：

<form [formGroup]="dieSetForm" (ngSubmit)="submitForm()" novalidate>
<label>Die Types:
<div *ngFor="let dieType of dieTypes; let i = index">
<label for="dieType{{dieType}}">
<input 
id="dieType{{dieType}}" 
type="checkbox" name="dieType" 
[value] = "dieType.value" 
(change)="onCheckboxChange($event)">
{{dieType.name}}
</label>
</div>
</label>
<input type="submit" value="Submit">
</form>

and the relevant part of the component.ts file:

export class CreateDieSetComponent implements OnInit {

dieSetForm: FormGroup;
constructor(private fb: FormBuilder) {
this.dieSetForm = this.fb.group({
dieTypesCheck: this.fb.array([]),
name: new FormControl('')
})
}

dieTypes: Array<any> = [
{ name: '4', value: '4'},
{ name: '6', value: '6'},
{ name: '8', value: '8'},
{ name: '10', value: '10'},
{ name: '12', value: '12'},
{ name: '20', value: '20'}
];
onCheckboxChange(e) {
const dieTypesCheck: FormArray = this.dieSetForm.get('dieTypesCheck') as FormArray;
if (e.target.checked) {
dieTypesCheck.push(new FormControl(e.target.value));
} else {
let i: number = 0;
dieTypesCheck.controls.forEach((item: FormControl) => {
if (item.value == e.target.value) {
dieTypesCheck.removeAt(i);
return;
}
i++;
});
}
}
submitForm() {
console.log(this.dieSetForm.value.name);
console.log(this.dieSetForm.value.dieTypesCheck);
this.dieSetForm.reset();
}
ngOnInit() {
}
}

Answer 1

Form数组需要手动清空，重置只是重置其中的控件，您必须添加以下内容：

(this.dieSetForm.get('dieTypesCheck') as FormArray).clear();

如果您还想删除所有控件，请在对组调用reset之前。