问题描述
我正在尝试使用反应性表单在表单中创建多选复选框列表,但是遇到一个问题,即我创建的用于存储所选复选框值的FormArray不会在提交时保留其他表单的状态。这将导致一个数组,其中包含多个与先前提交的内容对应的空值。
相关的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之前。