如何在 Angular 7 中从 JSON 生成 HTML FORM

Posted 2023-03-05

【中文标题】如何在 Angular 7 中从 JSON 生成 HTML FORM

【英文标题】：How to generate a HTML FORM from JSON in Angular 7

【发布时间】：2020-03-04 17:26:14

【问题描述】：

我想从下面的 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。

【问题讨论】：

这个问题***.com/q/53357556/7785337 可能会帮助您使用 JSON 构建角度形式..

见谷歌文档angular.io/guide/dynamic-form

【参考方案1】：

试试这个Angular6-json-schema-form

Stackblitz example

在你的打字稿文件中

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 10 吗？