如何解析要馈送到formcontrol的JSON值? [英] How to parse JSON values to be fed to formcontrol?
问题描述
我从服务器获取JSON响应，我从该服务器获取构建FormGroup对象所需的元数据.由于JSON是动态的，因此FormGroup对象也是动态的，如何解析HTML中的JSON字段?
I get JSON reponse from the server from which I take the metadata required to build the FormGroup object. Since the JSON is dynamic and so is FormGroup object, how to parse the JSON fields in HTML?
我查看了动态表单的角度文档 https://angular.io/guide/dynamic-表单，但在这里我看到它们正在将每个类对象从父 dynamic-form.component.ts 传递到 dynamic-form-question.component.ts
I looked at the angular documentation for dynamic forms https://angular.io/guide/dynamic-form but here I see they are passing each class object to the dynamic-form-question.component.ts from the parent dynamic-form.component.ts
我的JSON:
[
{
"key": "Basic",
"required": false,
"controlType": "section",
"children": [
{
"key": "net1",
"required": false,
"controlType": "dropdown"
},
{
"default": "",
"key": "net2",
"required": true,
"controlType": "textbox"
}
]
},
{
"key": "Advanced",
"required": false,
"controlType": "section",
"children": [
{
"key": "Area1",
"required": false,
"controlType": "sub-section",
"children": [
{
"default": "test",
"key": "key1",
"required": false,
"controlType": "dropdown",
"choices" : [ "test",
"test1",
"test2"
]
},
{
"default": "pass",
"key": "key2",
"required": false,
"controlType": "textbox"
}
]
},
{
"key": "Area2",
"required": false,
"controlType": "sub-section",
"children": [
{
"default": false,
"key": "key3",
"required": false,
"controlType": "radiobutton"
}
]
}
]
}
]
对应的FormGroup对象为:
for which the corresponding FormGroup Object is:
form = this.fb.group({
Basic: this.fb.group ({
net1: '',
net2: ''
}),
Advanced: this.fb.group ({
Area1: this.fb.group ({
key1: 'test',
key2: 'pass'
}),
Area2: this.fb.group ({
key3: ''
})
})
在HTML中，我需要从JSON中获取类似controlType的字段，以决定输入元素的类型以及下拉菜单中的选择.
In the HTML I need to get the fields from the JSON like controlType to decide on the type of input element and also the choices in case of a dropdown.
解析打字稿中的JSON以便将其传递到HTML的理想方法是什么?
What would be ideal way to parse the JSON in the typescript so that it can be passed onto the HTML?
基本上我想要子对象，例如
Basically I want the child object eg,
{
"key": "net1",
"required": false,
"controlType": "dropdown"
}
与相应的formGroup对象一起传递给JSON.
to be passed to JSON along with the corresponding formGroup object.
我的HTML看起来像:
My HTML looks like:
<div>
<form (ngSubmit)="onSubmit()" [formGroup]="form">
<div formGroupName="Basic">
<ng-container *ngFor="let controlName of controls('Basic.children')" formGroupName="children">
<input type="textbox" [formControlName]="controlName"><br>
</ng-container>
</div>
<div formGroupName="Advanced">
<div *ngFor="let groupName of controls('Advanced')" [formGroupName]="groupName">
<ng-container *ngFor="let controlName of controls('Advanced.' + groupName)">
<input type="textbox" [formControlName]="controlName"><br>
</ng-container>
</div>
</div>
<div class="form-row">
<button type="submit" [disabled]="!form.valid">Save</button>
</div>
</form>
</div>
以便我可以将ngSwitch应用于controlType，就像在官方网站上的示例中一样. (到目前为止，输入元素仅是一种类型.)
so that I can apply ngSwitch on the controlType just like in the example on the official website. (As of now the input element is of one type only. ).
有人可以帮我吗?
推荐答案
我刚刚做了一个解决方案，它可能有一些问题，虽然不是那么动态，但仍然可以解决问题
I just did a solution, there might be a few things wrong with it, and it is not that dynamic, but it could still help
这是我的模板:
<form novalidate >
<div *ngFor="let input of inputs">
<input [type]="input">
</div>
</form>
我完全复制了您的JSON示例，并用它来为我的解决方案建模
i completely copied your JSON Example and used that to model my solution
这是组件.
export class HomeComponent implements OnInit {
inputs: Array<String> = [];
jsonExample: Object;
constructor() {
}
ngOnInit() {
this.jsonExample =
[
{
"key": "Basic",
"required": false,
"controlType": "section",
"children": [
{
"key": "net1",
"required": false,
"controlType": "dropdown"
},
{
"default": "",
"key": "net2",
"required": true,
"controlType": "textbox"
}
]
},
{
"key": "Advanced",
"required": false,
"controlType": "section",
"children": [
{
"key": "Area1",
"required": false,
"controlType": "sub-section",
"children": [
{
"default": "test",
"key": "key1",
"required": false,
"controlType": "dropdown",
"choices" : [ "test",
"test1",
"test2"
]
},
{
"default": "pass",
"key": "key2",
"required": false,
"controlType": "textbox"
}
]
},
{
"key": "Area2",
"required": false,
"controlType": "sub-section",
"children": [
{
"default": false,
"key": "key3",
"required": false,
"controlType": "radiobutton"
}
]
}
]
}
];
this.parseJSON();
}
parseJSON() {
Object.keys(this.jsonExample).forEach(key => {
Object.keys(this.jsonExample[key]['children']).forEach(key2 => {
if (this.jsonExample[key]['children'][key2]['controlType'] === 'sub-section') {
Object.keys(this.jsonExample[key]['children'][key2]['children']).forEach(key3 => {
this.inputs.push(this.jsonExample[key]['children'][key2]['children'][key3]['controlType']);
});
}
else {
this.inputs.push(this.jsonExample[key]['children'][key2]['controlType']);
}
});
});
}
}
所以基本上我要检查每个controlType密钥，然后将其值添加到数组中，然后使用* ngFor和数据绑定，在此并不是您想要的所有内容，但是您可以进行一些更改以获取更多的值脱离物体.希望对您有帮助
so basically I am checking for every controlType key and then adding the value of it to an array, then using *ngFor and data binding, not everything you wanted is in here, but you could do some changes to also get more values out of the object. I hope this helps
这篇关于如何解析要馈送到formcontrol的JSON值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
