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
 }

Pls suggest me whether I am doing it right way and also pls advise how can I insertpush new control in specific index, ex- index 0Thanks in advance(谢谢)

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给你一个字符串数字等的数组，例如：FormGroups的FormArray.value给你一个对象数组。[0,1,2]
• FormGroups的FormArray.value给你一个对象数组，比如说。[{id:1,name:'name1'},{id:2,name:'name2'}]