html - 如何在 Angular 7 中从 JSON 生成 HTML FORM
问题描述
我想从下面的 JSON 生成一个 HTML FORM。
{
"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。
解决方案
在您的打字稿文件中
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>
推荐阅读
- ibm-watson - 无法将本地运行的 Node-Red 与 IBM Cloud 上的 Watson IoT 平台连接
- c# - Azure Active Directory 为 API 管理灾难恢复抛出“未实现”
- reactjs - 在拖放/拖动时反应失去位置
- r - R 开发工具未正确安装
- hybris - 是否可以修改 items.xml 中项目类型的顺序?
- python - 我想将所有工作表添加到excel中的一张工作表中
- linux - ORA-01034: ORACLE 不可用 ORA-27101: 共享内存领域不存在 Linux-x86_64 错误: 2: 没有这样的文件或目录
- django - 无法在 TINYMCE_DEFAULT_CONFIG = { 'content_css' 中导入我自己的 css 文件:
- r - 获取变量时出现“ncdf4”R 包错误
- c++ - 使用 pybind11 将自定义结构(指针向量)从 C++ 传递到 python 的方法是什么?