如何将JSON Schema转换为AngularJS表单字段？

问题分析与解决方案 #

你当前的指令实现存在几个核心问题：模板函数无法直接访问scope变量、手动拼接HTML字符串易出错、属性绑定方式不符合AngularJS规范，还有拼写错误（model_nname应为model_name）。以下是修正后的实现方案：

1. 修正单个文本输入指令

直接使用AngularJS的内置绑定语法替代字符串拼接，动态属性通过ng-*指令处理：

.directive('tptText', [function() {
  return {
    restrict: 'E',
    scope: {
      field: '=' // 绑定单个字段配置
    },
    template: `
      <input 
        id="{{field.name}}" 
        class="{{field.name}}" 
        type="text" 
        ng-model="formData[field.model_name]" 
        name="{{field.name}}"
        ng-required="field.required"
      />
      <validator ng-if="field.required" status="formname.{{field.name}}">
        <message key="required">This field is required</message>
      </validator>
    `
  };
}])

2. 修正JSON数据（移除末尾多余逗号）

[
  {"text":{"name":"Name","model_name":"name","required":true}},
  {"text":{"name":"Email","model_name":"email","required":true}},
  {"text":{"name":"password","model_name":"pass","required":false}}
]

3. 控制器与模板使用示例

在控制器中初始化表单数据和字段配置：

.controller('FormController', ['$scope', function($scope) {
  $scope.formData = {}; // 存储表单输入值
  $scope.fields = [
    {"text":{"name":"Name","model_name":"name","required":true}},
    {"text":{"name":"Email","model_name":"email","required":true}},
    {"text":{"name":"password","model_name":"pass","required":false}}
  ];
}])

在页面模板中循环渲染指令：

<form name="formname">
  <tpt-text ng-repeat="item in fields" field="item.text"></tpt-text>
</form>

4. 扩展为通用表单字段指令

如果需要支持更多输入类型（如email、password、number），可以改成通用指令：

.directive('tptFormField', [function() {
  return {
    restrict: 'E',
    scope: {
      field: '='
    },
    template: `
      <input 
        id="{{field.name}}" 
        class="{{field.name}}" 
        type="{{field.type || 'text'}}" 
        ng-model="formData[field.model_name]" 
        name="{{field.name}}"
        ng-required="field.required"
        ng-maxlength="{{field.maxlength || ''}}"
      />
      <validator ng-if="field.required" status="formname.{{field.name}}">
        <message key="required">This field is required</message>
      </validator>
    `
  };
}])

对应的通用JSON配置：

[
  {"type":"text","name":"Name","model_name":"name","required":true,"maxlength":100},
  {"type":"email","name":"Email","model_name":"email","required":true},
  {"type":"password","name":"Password","model_name":"pass","required":false}
]

使用时简化为：

<form name="formname">
  <tpt-form-field ng-repeat="field in fields" field="field"></tpt-form-field>
</form>

核心要点总结 #

• 避免手动拼接HTML字符串，利用AngularJS的模板绑定语法实现动态渲染
• 动态属性（如required、maxlength）使用ng-*指令绑定，而非手动拼接属性字符串
• ng-model绑定对象属性时，优先使用obj[propertyName]语法，比插值表达式更可靠
• 用ng-if控制元素显示/隐藏，替代条件拼接HTML

内容的提问来源于stack exchange，提问作者Vikram Chandran B