Angular Reactive表单formArray无法插入基于索引的控件

Question

这是我的表格：

  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 提前致谢

Answer 1

你可以有一个 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)

使用 FormBuilder

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'}]