Angular8、填充嵌套的FormArray

Question

我正在从服务器获取以下格式的数据

{
  "name": "Company",
  "Division": [
    {
      "name": "ABC",
      "position": "XYZ"
    }
  ],
  "employees": [
    {
      "name": "emp_1",
      "FullName": [
        {
          "firstName": "John",
          "lastName": "smith"
        }
      ]
    }
  ]
}

我想在 Form.So 中填充数据，用户可以编辑 form.I 我能够填充部门和员工数组。我无法填充 employees 数组中的 FullName 数组。

.ts代码-

editForm = this.fb.group({
name: [],

Division: this.fb.array([
  this.newDivision()
]),


employees: this.fb.array([
  this.newEmployees()
])

 });

  Division(): FormArray {
     return this.editForm.get("Division") as FormArray
  }

 newDivision(): FormGroup {
   return this.fb.group({
        name: [],
        position: []
   })
 }

 addDivision() {
   this.Division().push(this.newDivision());
 }

 removeDivision(i: number) {
   this.Division().removeAt(i);
 }

 employees(): FormArray {
  return this.editForm.get("employees") as FormArray
 }


 newEmployees(): FormGroup {
   return this.fb.group({
     name: [],
     FullName: this.fb.array([
        this.newFullName()
     ])
   })
 } 

addEmployees() {
   this.attributes().push(this.newEmployees());
}

removeEmployees(index: number) {
  this.Employees().removeAt(index);
}

FullName(index: number): FormArray {
   return this.employees().at(index).get("FullName") as FormArray
}

 newFullName(): FormGroup {
   return this.fb.group({
     language: [],
      caption: [],
   })
}

addFullName(index: number) {
   this.FullName(index).push(this.newFullName());
}

removeFullName(index: number, nameIndex: number) {
  this.FullName(index).removeAt(nameIndex);
}

ngOnInit(){
    this.editForm.patchValue({
      name: this.entity.name,
    });

    this.editForm.setControl('Division', this.setDiv(this.div));

    this.editForm.setControl('employees', 
    this.setEmp(this.entity.employees));

    setEmp(getEmp: any): FormArray {
      const formArray = new FormArray([]);
       getEmp.forEach(s => {
         formArray.push(this.fb.group({
         name: s.name
         }));
       });
      return formArray;
     }

    setDiv(getDiv: any): FormArray {
       const formArray = new FormArray([]);
       getDiv.forEach(s => {
         formArray.push(this.fb.group({
           name: s.name,
           position: s.position,
         }));
       });
       return formArray;
    }
 }

我应该如何为 FullName 数组使用 setControl？

Answer 1

我就这样解决了问题

setEmp(getEmp: any): FormArray {
const formArray = new FormArray([]);
getAEmp.forEach(s => {
  formArray.push(this.fb.group({
    name: s.name,
    FullName:this.fb.array([
    this.fb.group({
      firstName:s.FullName[0].firstName,
      lastName:s.FullName[0].lastName
    })
    ]),
  }));
});
return formArray;

}

Angular8、填充嵌套的FormArray

Angular 8, populate over nested FormArray

typescript

angular-reactive-forms

formarray

angular8