如何在Angular 7中从JSON生成HTML FORM [英] How to generate a HTML FORM from JSON in Angular 7
本文介绍了如何在Angular 7中从JSON生成HTML FORM的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想从JSON下面生成HTML表单.
{
"templateName":"C-Learn Survey",
"surveyQuestions":[
{
"questionTitle":"Enter your name",
"questionType":"Text",
"questionGroup":{
}
},
{
"questionTitle":"Enter your empid:",
"questionType":"Text",
"questionGroup":{
}
},
{
"questionTitle":"Select your technologies",
"questionType":"Multi choice",
"questionGroup":{
"options":[
{
"optionText":"Java"
},
{
"optionText":"Mule"
},
{
"optionText":".net"
}
],
"showRemarksBox":false
}
},
{
"questionTitle":"Gender",
"questionType":"Single choice",
"questionGroup":{
"options":[
{
"optionText":"Male"
},
{
"optionText":"Female"
}
],
"showRemarksBox":false
}
}
]
}
例如
{
"questionTitle":"Enter your name",
"questionType":"Text",
"questionGroup":{
}
对于上述json,应该有这样的html表单元素
<label>Enter your name</label>
<input type="text" placeholder="Enter your name">
我是Angular的新手,并且在互联网上看到一些帖子和代码,说可以通过jquery实现,请建议我如何实现.我正在使用Angular 7.
I am new to Angular and seen some post and code on internet saying that It is possible through jquery Please suggest me how to achieve that. I am using Angular 7.
推荐答案
尝试使用此 Angular6-json-schema-form
在您的打字稿文件中
import { jsonSchema } from './jsonSchema';
jsonFormOptions = {
loadExternalAssets: false,
};
schema = {
"type": "object",
"properties": {
"first_name": { "type": "string" },
"last_name": { "type": "string" },
"address": {
"type": "object",
"properties": {
"street_1": { "type": "string" },
"street_2": { "type": "string" },
"city": { "type": "string" },
"state": {
"type": "string",
"enum": [ "AL", "AK", "AS", "AZ", "AR", "CA", "CO", "CT", "DE",
"DC", "FM", "FL", "GA", "GU", "HI", "ID", "IL", "IN", "IA",
"KS", "KY", "LA", "ME", "MH", "MD", "MA", "MI", "MN", "MS",
"MO", "MT", "NE", "NV", "NH", "NJ", "NM", "NY", "NC", "ND",
"MP", "OH", "OK", "OR", "PW", "PA", "PR", "RI", "SC", "SD",
"TN", "TX", "UT", "VT", "VI", "VA", "WA", "WV", "WI", "WY" ]
},
"zip_code": { "type": "string" }
}
},
"birthday": { "type": "string" },
"notes": { "type": "string" },
"phone_numbers": {
"type": "array",
"items": {
"type": "object",
"properties": {
"type": { "type": "string", "enum": [ "cell", "home", "work" ] },
"number": { "type": "string" }
},
"required": [ "type", "number" ]
}
}
},
"required": [ "last_name" ]
};
在您的html文件中
<json-schema-form
[schema]="schema"
[layout]="layout"
[options]='jsonFormOptions'
[framework]="'bootstrap-4'"
(onSubmit)="onSubmit($event)"
(formSchema)="showFormSchemaFn($event)"
(formLayout)="showFormLayoutFn($event)">
</json-schema-form>
这篇关于如何在Angular 7中从JSON生成HTML FORM的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文