我正在制作 Angular 6 应用程序,我正在使用 Angular dynamic form
在这里,我创建了一个嵌套的输入字段,其中在初始阶段将有两个输入文本框,单击“添加”按钮后,每次单击“添加”按钮时,接下来的两个输入框将被追加。
这里一切正常..
这里我使用了question-service.ts中的值,
new TextboxQuestion({
elementType: "textbox",
class: "col-12 col-md-4 col-sm-12",
key: "project_name",
label: "Project Name",
type: "text",
value: '',
required: true,
order: 1
}),
new TextboxQuestion({
elementType: "textbox",
class: "col-12 col-md-4 col-sm-12",
key: "project_desc",
label: "Project Description",
type: "text",
value: '',
required: true,
order: 2
}),
new ArrayQuestion({
key: 'myArray',
value: '',
order: 3,
children: [
new TextboxQuestion({
elementType: "textbox",
class: "col-12 col-md-4 col-sm-12",
key: "property_one",
label: "Property One",
type: "text",
value: '',
required: true,
order: 3
}),
new TextboxQuestion({
elementType: "textbox",
class: "col-12 col-md-4 col-sm-12",
key: "property_two",
label: "Property Two",
type: "text",
value: '' ,
required: true,
order: 4
})
]
})
我需要更改每个类似的数据应该来自 json,
jsonData: any = [
{
"elementType": "textbox",
"class": "col-12 col-md-4 col-sm-12",
"key": "project_name",
"label": "Project Name",
"type": "text",
"value": "",
"required": true,
"order": 1
},
{
"elementType": "textbox",
"class": "col-12 col-md-4 col-sm-12",
"key": "project_desc",
"label": "Project Description",
"type": "text",
"value": "",
"required": true,
"order": 2
},
{
"elementType": "array",
"key": "myArray",
"value": "",
"order": "3",
"children": [
{
"elementType": "textbox",
"class": "col-12 col-md-4 col-sm-12",
"key": "property_one",
"label": "Property One",
"type": "text",
"value": "",
"required": true,
"order": 3
},
{
"elementType": "textbox",
"class": "col-12 col-md-4 col-sm-12",
"key": "property_two",
"label": "Property Two",
"type": "text",
"value": "",
"required": true,
"order": 4
}
]
}
];
Stackblitz 没有 JSON:
https://stackblitz.com/edit/angular-x4a5b6-xcychx
Stackblitz 使用 JSON:
https://stackblitz.com/edit/angular-x4a5b6-u6ecpk
加载 JSON 时需要发生在没有 json 的 stacblitz 链接中发生的相同场景..
我在 getQuestions()
中给出了以下内容,例如,
getQuestions() {
console.log(this.jsonData);
let questions: any = [];
this.jsonData.forEach(element => {
if (element.elementType === 'textbox') {
questions.push(new TextboxQuestion(element));
} else if (element.elementType === 'array') {
questions.push(new ArrayQuestion(element));
}
});
return questions.sort((a, b) => a.order - b.order);
}
}
对于普通文本框,它可以工作,但对于子文本框,它在单击添加按钮时不起作用(文本框未显示),子文本框不会被添加。
请帮助我实现 link 1 中发生的相同结果在link 2中使用JSON时也需要发生..并且请不要在核心 Angular 中包含任何第三方库。
最佳答案
@Many,当您有类型数组时,必须在推送数组之前创建子级。
...
} else if (element.elementType === 'array') {
let children:any[]=[]; //declare children
//each children of element fill our array children
element.children.forEach(e=>{
if (e.elementType === 'textbox') {
children.push(new TextboxQuestion(e));
}
})
//Hacemos un push not of element else element + the property children
//changed (it will be the array created)
questions.push(new ArrayQuestion({...element,children:children}));
}
关于javascript - 使用 Angular 形式将元素值形成为 JSON,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53113962/