本文介绍了提交表单时未重置角反应式表单中的表单数组的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用反应式表单在表单中创建多选复选框列表，但遇到了一个问题，即我创建的用于存储所选复选框值的Form数组在提交时未与表单的其余部分重置。这将导致数组具有与以前的提交对应的多个空值。相关的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() {
}
}
推荐答案
表单数组需要手动清空，重置只会重置其中的控件，您必须添加如下内容：
(this.dieSetForm.get('dieTypesCheck') as FormArray).clear();
如果要同时删除所有控件，请在对组调用Reset之前执行此操作。
这篇关于提交表单时未重置角反应式表单中的表单数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！