从 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)])
把它放在下面,这样就可以了。我从您的代码中省略了addOptions
和addOptionRow
,而是应用了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 数据的嵌套表单数组填充表单控件中的值的主要内容,如果未能解决你的问题,请参考以下文章