- 首页
- 前端开发
- 从 JSON 数据中的嵌套表单数组填充表单控件中的值
从 JSON 数据中的嵌套表单数组填充表单控件中的值
[英] populate values in Form control from nested Form Array from JSON data
本文介绍了从 JSON 数据中的嵌套表单数组填充表单控件中的值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
FormArrayformObj 有一个 componentDetails 对象数组，而该数组又包含一个嵌套数组组件数组.
导出类 FormViewComponent 实现 OnInit {公共回调表单:表单组；formObj = {组件详细信息":[{成分": [{"value": "选择 1"}, {"value": "选择 2"}],"cpv": "","label": "问题描述",类型":收音机"，强制性":真}]};loadObservableForm() {this.formService.getData(this.id).订阅((formObj) =>{this.formObj = formObj;this.callbackForm = this._formBuild.group({组件详细信息:this._formBuild.array([])});this.addComponentDetails();},(错误) =>控制台错误(错误)，() =>console.log('观察完成'));}添加组件详细信息(){const control = this.callbackForm.controls.componentDetails;this.formObj.componentDetails.forEach(x => {control.push(this.addControl(x));});}添加控件(x){const group = this._formBuild.group({标签:x.label，cpv: x.cpv,类型:x.type，强制性:x.mandatory，组件:this._formBuild.array([this.addOptions(x)])});返回组；}添加选项(z){常量控制 = <表格阵列 >z.组件；z.component.forEach(y => {control.push(this.addOptionRow(y.value));});}添加选项行(值){返回 this._formBuild.group({价值:价值});}}
模板 HTML:
</fieldset>
</表单>
问题:
在组件模板 HTML 中，我无法获取 {{ answer.value }} 的值.我尝试了 answer.controls.value.value 和 answer.controls.value .没有任何效果.question.controls.component.controls 返回 [Object Object]
解决方案
在表单数组中调用addOptions时遇到问题:
组件:this._formBuild.array([this.addOptions(x)])
把它放在下面，这样就可以了.我从您的代码中省略了 addOptions 和 addOptionRow，而是在 addControl 中应用了逻辑:
addControl(x) {const group = this._formBuild.group({标签:x.label，cpv: x.cpv,类型:x.type，强制性:x.mandatory，组件:this._formBuild.array([])});const ctrl = group.controls.component as FormArray;x.component.forEach(y => {ctrl.push(this._formBuild.group({值:y.value}))})返回组；}
并且您的模板在其他方面是正确的，但要显示标签，请执行以下操作:
{{ answer.value.value }}
代替
{{ answer.value }}
FormArrayThe formObj has array of componentDetails Object which in turn has a nested array of component array.
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
});
}
}
Template 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>
Problem:
In the component template HTML, I cannot get the value for {{ answer.value }}. I tried with answer.controls.value.value and answer.controls.value. And nothing is working. question.controls.component.controls returns [Object Object]
解决方案
You have trouble when calling addOptions inside the form array:
component: this._formBuild.array([this.addOptions(x)])
Place that below instead, so this will work. I omitted addOptions and addOptionRow from your code and instead applied the logic in 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;
}
and your template is otherwise correct, but to show the label do:
{{ answer.value.value }}
instead of
{{ answer.value }}
这篇关于从 JSON 数据中的嵌套表单数组填充表单控件中的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
