我如何访问formGroup内部的FormArray在另一个formGroup?

Question

我有一个数据数组如下:

[
{
id: "1",
name: "task1",
taskForms: [
{
id: "8782",
name: "ProcedureComment",
sortOrder: null,
description: "Comment for 'Procedure end / Suture' task",
label: null
},
{
id: "20",
name: "form20",
description: "form20 description",
label: "form20 lable"
}
]
},
{
id: "2",
name: "task2",
taskForms: [
{
id: "87822",
name: "ProcedureComment2",
sortOrder: null,
description: "Comment for 'Procedure end / Suture' task2",
label: null
},
{
id: "202",
name: "form202",
description: "form202 description",
label: "form202 lable"
}
]
}
];

，我想把taskForms转换成FormArray()。

我是否必须将tasks标记为formGroup，然后将taskForms标记为FormArray?我该怎么做呢?

public formGroup = new FormGroup({
tasks: new FormControl([]) 
//==>> i need it first as FormControl then i want to convert it and write data inside.
});

我试着:

this.formGroup.setControl('tasks', this.formBuilder.group(tasks));

但我不能使它工作。

Answer 1

FormArray in Nested FormGroup

你可以使用FormBuilder让你的生活更轻松:

constructor(private fb: FormBuilder) {}
ngOnInit(): void {
this.formGroup = this.fb.group({
nested_formgroup: this.fb.group({
array: this.fb.array([
{ example: ['']}
])
})
})
}

结果

{
"nested_formgroup": {
"array": [
{
"example": ""
}
]
}
}

加载数据

要加载数据，您只需要将对象映射到FormControls的value成员。

loadData() {
this.someService.getData().subscribe(
data => {
this.formGroup.get('nested_formgroup').get('array').value[0].example = data.example
}
)
}

这里有一个关于Stackblitz的例子供你测试/玩。