Angular实现类Google Form表单将生成JSON转为纯HTML文件的方案咨询

之前导入SurveyJS jQuery示例报错的核心原因是该Angular项目导出的JSON为自定义结构，与SurveyJS的标准Schema不兼容，无需强行适配SurveyJS，直接编写轻量原生渲染逻辑即可实现需求。

实现逻辑说明 #

不需要引入任何第三方框架依赖，仅通过原生HTML+JS实现JSON到表单的渲染，你只需把导出的JSON粘贴到指定位置即可生成完整可用的表单，字段映射规则完全匹配你用的Angular表单项目导出的结构。

可直接复用的代码模板 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>自定义表单渲染</title>
  <style>
    .form-item { margin: 16px 0; }
    .form-label { display: block; margin-bottom: 8px; font-weight: 500; }
    .required-mark { color: #f5222d; margin-left: 4px; }
    .form-control { width: 300px; padding: 6px 12px; border: 1px solid #d9d9d9; border-radius: 4px; }
    .option-group { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
    .option-item { display: flex; align-items: center; gap: 6px; }
    .submit-btn { padding: 8px 24px; background: #1890ff; color: #fff; border: none; border-radius: 4px; cursor: pointer; }
  </style>
</head>
<body>
  <div id="form-container"></div>
  <button id="submit-btn" class="submit-btn" style="margin-top: 24px;">提交表单</button>

  <script>
    // 此处替换为你从Angular项目导出的JSON配置
    const formJSON = {
      // 粘贴导出的JSON内容到这里
    };

    // 表单渲染核心函数
    function renderForm(json) {
      const container = document.getElementById('form-container');
      container.innerHTML = '';
      // 兼容多页面/单页面两种JSON结构
      const elements = json.pages ? json.pages.flatMap(page => page.elements) : json.elements || [];
      
      elements.forEach(elem => {
        const itemDiv = document.createElement('div');
        itemDiv.className = 'form-item';
        
        // 渲染字段标签
        const label = document.createElement('label');
        label.className = 'form-label';
        label.textContent = elem.title || elem.label || '';
        if (elem.isRequired) {
          const requiredMark = document.createElement('span');
          requiredMark.className = 'required-mark';
          requiredMark.textContent = '*';
          label.appendChild(requiredMark);
        }
        itemDiv.appendChild(label);

        // 按控件类型渲染对应HTML组件
        switch(elem.type) {
          case 'text':
          case 'email':
          case 'number':
          case 'date':
            const input = document.createElement('input');
            input.type = elem.type;
            input.className = 'form-control';
            input.name = elem.name;
            input.required = elem.isRequired || false;
            if (elem.placeholder) input.placeholder = elem.placeholder;
            itemDiv.appendChild(input);
            break;
          
          case 'radiogroup':
            const radioGroup = document.createElement('div');
            radioGroup.className = 'option-group';
            elem.choices.forEach(choice => {
              const optionItem = document.createElement('div');
              optionItem.className = 'option-item';
              
              const radio = document.createElement('input');
              radio.type = 'radio';
              radio.name = elem.name;
              radio.value = choice.value;
              radio.required = elem.isRequired || false;
              
              const optionLabel = document.createElement('span');
              optionLabel.textContent = choice.text;
              
              optionItem.appendChild(radio);
              optionItem.appendChild(optionLabel);
              radioGroup.appendChild(optionItem);
            })
            itemDiv.appendChild(radioGroup);
            break;
          
          case 'checkbox':
            const checkboxGroup = document.createElement('div');
            checkboxGroup.className = 'option-group';
            elem.choices.forEach(choice => {
              const optionItem = document.createElement('div');
              optionItem.className = 'option-item';
              
              const checkbox = document.createElement('input');
              checkbox.type = 'checkbox';
              checkbox.name = elem.name;
              checkbox.value = choice.value;
              
              const optionLabel = document.createElement('span');
              optionLabel.textContent = choice.text;
              
              optionItem.appendChild(checkbox);
              optionItem.appendChild(optionLabel);
              checkboxGroup.appendChild(optionItem);
            })
            itemDiv.appendChild(checkboxGroup);
            break;
          
          case 'dropdown':
            const select = document.createElement('select');
            select.className = 'form-control';
            select.name = elem.name;
            select.required = elem.isRequired || false;
            elem.choices.forEach(choice => {
              const option = document.createElement('option');
              option.value = choice.value;
              option.textContent = choice.text;
              select.appendChild(option);
            })
            itemDiv.appendChild(select);
            break;
          
          case 'comment':
            const textarea = document.createElement('textarea');
            textarea.className = 'form-control';
            textarea.name = elem.name;
            textarea.rows = 4;
            textarea.required = elem.isRequired || false;
            if (elem.placeholder) textarea.placeholder = elem.placeholder;
            itemDiv.appendChild(textarea);
            break;
        }
        container.appendChild(itemDiv);
      })
    }

    // 页面加载后自动渲染，绑定提交事件
    window.onload = () => {
      renderForm(formJSON);
      document.getElementById('submit-btn').addEventListener('click', () => {
        const formData = new FormData();
        document.querySelectorAll('input, select, textarea').forEach(elem => {
          if (elem.type === 'checkbox') {
            if (elem.checked) {
              const existing = formData.get(elem.name);
              if (existing) {
                formData.set(elem.name, [].concat(existing, elem.value));
              } else {
                formData.set(elem.name, [elem.value]);
              }
            }
          } else {
            formData.set(elem.name, elem.value);
          }
        });
        // 可自行修改提交逻辑，此处仅做示例输出
        const result = Object.fromEntries(formData.entries());
        console.log('表单提交数据：', result);
        alert('表单提交成功，数据已输出到控制台');
      })
    }
  </script>
</body>
</html>

使用步骤 #

• 打开Angular表单项目页面，点击Model按钮复制导出的JSON配置
• 将复制的JSON内容粘贴到上述代码中formJSON变量的对应位置
• 保存整个文件为.html后缀的文件，直接在浏览器打开即可得到完整可交互的表单

扩展说明 #

如果你的导出JSON包含特殊自定义控件，只需在renderForm函数的switch分支中新增对应类型的渲染逻辑即可，无需改动整体框架，适配成本极低。

内容的提问来源于stack exchange，提问作者PamPulka123