Как анализировать значения JSON для передачи в formcontrol?
Я получаю ответ JSON от сервера, с которого я беру метаданные, необходимые для создания объекта FormGroup. Поскольку JSON является динамическим, как и объект FormGroup, как анализировать поля JSON в HTML?
Я посмотрел документацию angular для динамических форм https://angular.io/guide/dynamic-form, но здесь я вижу, что они передают каждый объект класса в dynamic-form-question.component.ts из родительского 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:
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, чтобы выбрать тип элемента ввода, а также варианты выбора в случае раскрывающегося списка.
Каким был бы идеальный способ разобрать JSON в машинописном тексте, чтобы его можно было передать в HTML?
В основном я хочу, чтобы дочерний объект, например,
{
"key": "net1",
"required": false,
"controlType": "dropdown"
}
для передачи в JSON вместе с соответствующим объектом formGroup.
Мой HTML выглядит так:
<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, как в примере на официальном сайте. (На данный момент входной элемент только одного типа.).
Может ли кто-нибудь мне с этим помочь?
Ответы 1
Я только что принял решение, может быть, с ним что-то не так, и оно не такое динамичное, но все же может помочь
это мой шаблон:
<form novalidate >
<div *ngFor = "let input of inputs">
<input [type] = "input">
</div>
</form>
Я полностью скопировал ваш пример JSON и использовал его для моделирования своего решения
это component.ts
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 и привязку данных, здесь есть не все, что вы хотели, но вы можете внести некоторые изменения, чтобы также получить больше значений из объект. надеюсь, это поможет
@Mannorath Речь идет не только о controlType, мне также нужны варианты выбора в случае выпадающего списка. В принципе, если controlType - это раскрывающийся список, <input [type]> не будет правильным, так как я бы хотел, чтобы он был типа <select>
хорошо, вы используете имена для своих радиокнопок? или как настроить радиогруппу
Да, я использую имя для своих переключателей независимо от того, что я получаю от ключа JSON.
Спасибо @Mannaroth. Я попробую посмотреть, сработает ли это для меня