html - Angular Reactive表单formArray无法插入基于索引的控件
问题描述
这是我的表格:
this.addForm = this.formBuilder.group({
details: this.formBuilder.array([]),
});
我正在调用这个函数来推送控制
nestedFormGroupDetails(control) {
control.push(
this.formBuilder.group({
name: ['', [Validators.required]],
age: ['', [Validators.required]]
}));
**// based on scenario, I want to insert new control. ex. occupation
this.detailsFormArray.insert(0, [...]) // how to add abstract control here**
}
get detailsFormArray() {
return this.addForm.get('details') as FormArray
}
请建议我是否以正确的方式进行操作,还请建议我如何在特定索引中插入/推送新控件,例如索引 0 提前致谢
解决方案
你可以有一个 FormControls 的 FormArray 或一个 FormGroups 的 FormArray (*)
//this insert a new FormControl in an Array of FormControls
this.detailsFormArray.insert(0,new FormControl())
//this insert a new FormControl in an Array of FormControls
this.detailsFormArray.insert(0,new FormGroup({
prop1:new FormControl(),
prop2:new FormControl(),
}))
//or in steps
const group=new FormGroup({
prop1:new FormControl(),
prop2:new FormControl(),
})
this.detailsFormArray.insert(0,group)
使用表单生成器
this.detailsFormArray.insert(0,this.fb.control())
//this insert a new FormControl in an Array of FormControls
this.detailsFormArray.insert(0,this.fb.group({
prop1:[],
prop2:[]
}))
(*)
- FormControls 的 FormArray.value 为您提供字符串/数字等数组,例如
[0,1,2]
- FormGroups 的 FormArray.value 为您提供对象数组,例如
[{id:1,name:'name1'},{id:2,name:'name2'}]
推荐阅读
- r - R 失败的并行化 - 多核处理减慢玩具示例
- php - 根据 Laravel 中的 url 跳过导航栏
- amazon-web-services - 对 ECS 任务使用 .sync 步进函数
- c# - 如何使用 Azure 语音转文本和 C# 生成时间戳?
- jupyter-notebook - DL中jupyter notebook和colab的区别
- r - 尝试将数字分配给变量值 R
- mysql - 使用带有 read_sql_query 的参数的结果不好?
- python-3.x - 在终端上运行 virtualenv 命令时
- android - 单击确认页面中的任何内容并且应用程序崩溃时,将图像上传到 Firebase 失败
- postgresql - 查询有效,但不起作用