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

Posted

技术标签:

【中文标题】从 JSON 数据的嵌套表单数组填充表单控件中的值【英文标题】:populate values in Form control from nested Form Array from JSON data 【发布时间】:2018-03-28 14:36:28 【问题描述】:

FormArrayFormObj 有一个componentDetails 对象数组,而该数组又包含一个嵌套的组件数组。

   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
        );
    

模板 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>

问题:

在组件模板 HTML 中,我无法获取 answer.value 的值。我尝试使用 answer.controls.value.value 和 answer.controls.value。没有任何工作。 question.controls.component.controls 返回[Object Object]

【问题讨论】:

这是一篇关于“嵌套模型驱动表单”的好文章:scotch.io/tutorials/… 有一些 plunkr,因此您可以使用它并测试您需要的解决方案。 您是否尝试过在addOption 方法中使用return group 而不是question.push(group); 对不起,返回组不起作用:( 这段代码真的有效吗?当我尝试时,formarray是null? 我通过调用 API 将 formObj 作为 JSON 获取。 addComponentDetails 中的 console.log(controls) 返回 FormArray。我在问题中添加了FormArray的截图 【参考方案1】:

在表单数组中调用addOptions时遇到问题:

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

把它放在下面,这样就可以了。我从您的代码中省略了addOptionsaddOptionRow,而是应用了addControl 中的逻辑:

addControl(x) 
  const group = this._formBuild.group(
    label: x.label,
    cpv: x.cpv,
    type: x.type,
    mandatory: x.mandatory,
    component: this._formBuild.array([])
  );
  const ctrl = group.controls.component as FormArray;
  x.component.forEach(y => 
    ctrl.push(this._formBuild.group(
      value: y.value
    ))
  )
  return group;

您的模板在其他方面是正确的,但要显示标签:

 answer.value.value 

而不是

 answer.value 

StackBlitz

【讨论】:

我无法在
callbackForm.value | json 
用于在提交表单时发送 selectedValue
我分叉了你的 stackblitz 以添加 selectedValue 和 formObj 以捕获无线电选择。不确定这是否是正确的方法? ***.com/questions/47518664/… 嗨@AJT_82,您能告诉我如何在提交表单时获得选定的值吗?谢谢!

以上是关于从 JSON 数据的嵌套表单数组填充表单控件中的值的主要内容,如果未能解决你的问题,请参考以下文章

通过名称和值使用 json 数据填充表单

有没有更好的方法将值推送到表单控件,其中数组作为 Angular 中的值

如何在 Extjs 4 中使用嵌套的 JSON 填充表单

填充 QTableView 表单 JSON 数组

在邮递员表单数据中发布嵌套的 json

使用 JSON 数据填充表单