[英]Converting json array into variable names/ values from nested form data to repopulate form
[英]populate values in Form control from nested Form Array from JSON data
FormArray formObj具有componentDetails对象的数组,而ObjectDetails对象又具有一个嵌套的component数组。
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返回[对象对象]
在表单数组内调用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 }}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.