Javascript 从JSON数据的嵌套表单数组填充表单控件中的值

formObj具有componentDetails对象的数组，而该对象又具有ComponentArray的嵌套数组

   export class FormViewComponent implements OnInit {

    public callbackForm: FormGroup;

    formObj = {
        "componentDetails": [{
            "component": [{
                "value": "Choice 1"
            }, {
                "value": "Choice 2"
            }],
            "cpv": "",
            "label": "Description of Problem",
            "type": "radio",
            "mandatory": true
        }]
    };

    loadObservableForm() {
        this.formService.getData(this.id)
            .subscribe(
                (formObj) => {
                    this.formObj = formObj;
                    this.callbackForm = this._formBuild.group({
                        componentDetails: this._formBuild.array([])
                    });
                    this.addComponentDetails();
                },
                (err) => console.error(err),
                () => console.log('observable complete')
            );

    }

    addComponentDetails() {
        const control = <FormArray> this.callbackForm.controls.componentDetails;
        this.formObj.componentDetails.forEach(x => {
            control.push(this.addControl(x));
        });
    }

    addControl(x) {
        const group = this._formBuild.group({
            label: x.label,
            cpv: x.cpv,
            type: x.type,
            mandatory: x.mandatory,
            component: this._formBuild.array([this.addOptions(x)])
        });
        return group;
    }

    addOptions(z) {
        const control = < FormArray > z.component;
        z.component.forEach(y => {
            control.push(this.addOptionRow(y.value));
        });
    }

    addOptionRow(value) {
        return this._formBuild.group({
            value: value
        });
    }
}

导出类FormViewComponent实现OnInit{
公共调用表单：FormGroup；
formObj={
“组件详细信息”：[{
“组成部分”：[{
“值”：“选择1”
}, {
“值”：“选择2”
}],
“cpv”：“，
“标签”：“问题说明”，
“类型”：“收音机”，
“强制”：正确
}]
};
loadobserveform（）{
this.formService.getData（this.id）
.订阅(
（formObj）=>{
this.formObj=formObj；
this.callbackForm=this.\u formBuild.group({
componentDetails:this.\u formBuild.array（[]）
});
this.addComponentDetails（）；
},
（错误）=>控制台错误（错误），
（）=>console.log（'observable complete'）
);
}
addComponentDetails（）{
const control=this.callbackForm.controls.componentDetails；
this.formObj.componentDetails.forEach（x=>{
control.push（this.addControl（x））；
});
}
addControl（x）{
const group=this.\u formBuild.group({
标签：x.label，
cpv:x.cpv，
类型：x.type，
强制性：x.强制性，
组件：this.\u formBuild.array（[this.addOptions（x）]）
});
返回组；
}
添加选项（z）{
常数控制=z分量；
z、 component.forEach（y=>{
control.push（this.addOptionRow（y.value））；
});
}
addOptionRow（值）{
返回此。\u formBuild.group({
价值：价值
});
}
}

模板HTML：

<form [formGroup]="callbackForm">
    <div>
        <div formArrayName="componentDetails">
            <div *ngFor="let question of callbackForm.controls.componentDetails.controls; let i = index;" [formGroupName]="i">
            <div class="row">
                <div class="col-md-12 panel-group panel-group--compressed">
                    <div class="panel panel--default">
                        <fieldset>
                            <div class="row" *ngIf="question.controls.type.value === 'radio'">
                                <div class="col-md-12">
                                    <p>{{ question.controls.label.value }}</p>
                                    <div formArrayName="component">
                                        <div *ngFor="let answer of question.controls.component.controls; let j = index" [formGroupName]="j">
                                        <label class="radio radio--alt radio--stacked">
                                        <input type="radio" name="radio-stacked">
                                        <span class="radio__input"></span>
                                        <span class="radio__label">{{ answer.value }}</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                    </div>
                    </fieldset>
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>
</form>

{{question.controls.label.value}

{{answer.value}}

问题:

---

在组件模板HTML中，我无法获取{{answer.value}的值。我尝试了answer.controls.value.value和answer.controls.value。什么都没用。question.controls.component.controls返回[Object Object]

在表单数组中调用

addOptions

时遇到问题：

component: this._formBuild.array([this.addOptions(x)])

把它放在下面，这样就行了。我从代码中省略了

addOptions

和

addOptionRow

，而是应用了

addControl

中的逻辑：

addControl（x）{
const group=this.\u formBuild.group({
标签：x.label，
cpv:x.cpv，
类型：x.type，
强制性：x.强制性，
组件：this.\u formBuild.array（[]）
});
const ctrl=group.controls.component作为FormArray；
x、 component.forEach（y=>{
ctrl.push（此.\u formBuild.group({
值：y.value
}))
})
返回组；
}

您的模板在其他方面是正确的，但要显示标签，请执行以下操作：

{{answer.value.value}

而不是

{{answer.value}

---

这是一篇关于“嵌套模型驱动表单”的好文章：有一些plunkr，您可以使用它来测试您需要的解决方案。您是否尝试过使用

返回组

而不是

问题。推送（组）

在

addOption

方法中？很抱歉，返回组不起作用：（这段代码真的起作用了吗？当我尝试它时，formarray是

null

？我通过调用API.console.log（controls）将formObj作为JSON获取）inside addComponentDetails返回FormArray。我在问题中添加了FormArray的屏幕截图。我无法在{{callbackForm.value | json}中获取收音机的selectedValue（选项1或选项2）为了在表单提交时发送selectedValue，我使用stackblitz将selectedValue与formObj一起添加，以捕获无线电选择。不确定这是否正确？您好@AJT82，您能告诉我如何在表单提交时获取selectedValue吗？谢谢！