问题描述:
在Angular中使用FormArray时,调用.removeAt(i)方法从FormArray中删除元素时,DOM中的表单并没有相应地更新。
解决方法:
确保在调用.removeAt(i)之后,FormArray中的元素已经被正确删除。可以使用console.log()来跟踪FormArray中的元素。
在表单的HTML模板中,使用*ngFor指令来遍历FormArray中的元素,并在每个元素上使用formGroupName指令来关联对应的FormGroup。例如:
removeItem(i: number) {
(this.myForm.get('myArray') as FormArray).removeAt(i);
(this.myForm.get('myArray') as FormArray).controls.splice(i, 1);
}
这样做可以确保FormArray和DOM中的表单控件保持同步。
removeItem(i: number) {
(this.myForm.get('myArray') as FormArray).removeAt(i);
(this.myForm.get('myArray') as FormArray).controls.splice(i, 1);
this.myForm.markAsDirty();
}
这可能会触发Angular的变更检测机制,使DOM中的表单更新。
请注意,以上解决方法中的代码示例仅供参考,具体的实现方式可能根据你的代码结构和需求而有所不同。