来自json数据的AngularJS动态表单（不同类型）

Posted 2023-02-22

【中文标题】来自json数据的AngularJS动态表单（不同类型）

【英文标题】：AngularJS dynamic form from json data (different types)

【发布时间】：2014-08-06 12:55:08

【问题描述】：

我尝试使用来自 JSON 的数据在 AngularJS 中创建动态表单。我有这个工作：

HTML

    <p ng-repeat="field in formFields">
            <input 
                dynamic-name="field.name"
                type=" field.type "
                placeholder=" field.name "
                ng-model="field.value"
                required
            >
            <span ng-show="myForm.field.name.$dirty && myForm.field.name.$error.required">Required!</span>
            <span ng-show="myForm.field.name.$dirty && myForm.field.name.$error.email">Not email!</span>
    </p>
    <button ng-disabled="myForm.$invalid">Submit</button>                 
</form>

JS

angular.module('angularTestingApp').controller('DynamicFormCtrl', function ($scope) 

$scope.formFields = [
    
        name: 'firstName',
        type: 'text'
    ,
    
        name: 'email',
        type: 'email'
    ,
    
        name: 'password',
        type: 'password'
    ,
    
        name: 'secondName',
        type: 'text'
    
];).directive("dynamicName",function($compile)
return 
    restrict:"A",
    terminal:true,
    priority:1000,
    link:function(scope,element,attrs)
        element.attr('name', scope.$eval(attrs.dynamicName));
        element.removeAttr("dynamic-name");
        $compile(element)(scope);
    
);

此代码有效，但问题是 我不知道如何添加动态复选框或清单以及如何在表单中 验证，如下所示：

angular.module('angularTestingApp')

.controller('DynamicFormCtrl', function ($scope)

$scope.formFields = [
    
        name: 'firstName',
        type: 'text'
    ,
    
        name: 'email',
        type: 'email'
    ,
    
        name: 'password',
        type: 'password'
    ,
    
        name: 'city',
        type: 'checkbox',
        choices: [
             name: "red" ,
             name: "blue" ,
             name: "green" ,
        ]
    
];)

提前感谢您的关注。 最好的问候！

【参考方案1】：

您可以使用 ngIf 来判断是否应该显示复选框或文本输入，如下所示：

<p ng-repeat="field in formFields">
        <input 
            ng-if="field.type != 'checkbox'"
            dynamic-name="field.name"
            type=" field.type "
            placeholder=" field.name "
            ng-model="field.value"
            required
        >
        <input
            ng-if="field.type == 'checkbox'"
            ng-repeat="choice in choices"
            type="checkbox"
            dynamic-name="field.name"
            ng-value="choice.name"
        >
        <span ng-show="myForm.field.name.$dirty && myForm.field.name.$error.required">Required!</span>
        <span ng-show="myForm.field.name.$dirty && myForm.field.name.$error.email">Not email!</span>
</p>
<button ng-disabled="myForm.$invalid">Submit</button>  

【参考方案2】：

我已经解决了我的问题。

这是一个带有 AngularJS 验证的动态表单示例的 plunkr 链接

http://plnkr.co/edit/kqiheTEoGDQxAoQV3wxu?p=preview

.html

 <form name="myForm" class="form-horizontal" role="form" ng-submit="submitForm()">
 <div ng-repeat="field in entity.fields">    
  <ng-form name="form">
    <!-- TEXT FIELDS -->
    <div ng-if="field.type=='text'" class="form-group">
      <label class="col-sm-2 control-label">field.label</label>
      <div class="col-sm-6">
        <input type=" field.type " dynamic-name="field.name" id="field.name" data-ng-model="field.data"  class="form-control" required/>
         <!--<span ng-show="myForm.field.name.$dirty && myForm.field.name.$error.required">Required!</span>.-->
         <span  data-ng-show=" 'form.'+field.name+'.$dirty && form.'+field.name+'.$error.required'">Required!</span>
      </div>
    </div>

    <!-- EMAIL FIELDS -->
    <div ng-if="field.type=='email'" class="form-group">
      <label class="col-sm-2 control-label">field.label</label>
      <div class="col-sm-6">
        <input type=" field.type " dynamic-name="field.name" data-ng-model="field.data" class="form-control" required/>
         <span data-ng-show=" 'form.'+field.name+'.$dirty && form.'+field.name+'.$error.required'">Required!</span>
         <span data-ng-show=" 'form.'+field.name+'.$dirty && form.'+field.name+'.$error.email'">Not email!</span>
      </div>
    </div>

    <!-- PASSWORD FIELDS -->
    <div ng-if="field.type=='password'" class="form-group" >
      <label class="col-sm-2 control-label">field.label</label>
      <div class="col-sm-6">
        <input type=" field.type " dynamic-name="field.name" data-ng-model="field.data" ng-minlength=field.min ng-maxlength=field.max class="form-control" required/>
         <span data-ng-show=" 'form.'+field.name+'.$dirty && form.'+field.name+'.$error.required'">Required!</span>
         <span data-ng-show=" '!form.'+field.name+'.required && (form.'+field.name+'.$error.minlength || form.'+field.name+'.$error.maxlength)' ">Passwords must be between 8 and 20 characters.</span>
        </div>
    </div>

    <!-- SELECT FIELDS -->
    <div ng-if="field.type=='select'" class="form-group" >
      <label class="col-sm-2 control-label">field.label</label>
      <div class="col-sm-6">
        <select data-ng-model="field.data" ng-options="option.name for option in field.options" class="form-control" required/>
      </div>      
    </div>

    <!-- RADIO FIELDS -->
    <div ng-if="field.type=='radio'" class="form-group">
      <label class="col-sm-2 control-label">field.label</label>
      <div class="col-sm-6">

        <div class="checkbox" ng-repeat="option in field.options" >
                  <label>                
            <input type="radio" data-ng-model="field.data"  name="taskGroup"  id="option.name" value="option.id">option.name
          </label>
                </div>
      </div>
    </div>

    <!-- CHECKBOX FIELDS -->
    <div ng-if="field.type=='checkbox'" class="form-group" >
      <label class="col-sm-2 control-label">field.label</label>
      <div class="col-sm-6">        
               <div class="checkbox" ng-repeat="option in field.options" >
                  <label>
                    <input type="checkbox" data-ng-model="option.data"  name="taskGroup"  id="option.name" value="option.id" >option.name
                  </label>
                </div>

      </div>
    </div>

  </ng-form>

 </div>


  <br/>
  <button ng-disabled="myForm.$invalid" type="submit" id="submit">Submit</button>
  <br/>
  <pre>entity|json</pre>
   <br/>

 </form>

.js

app.controller('DynamicFormController', function ($scope, $log) 



    // we would get this from the api
    $scope.entity = 
      name : "Course", 
      fields :
        [
          type: "text", name: "firstname", label: "Name" , required: true, data:"",
          type: "radio", name: "color_id", label: "Colors" , options:[id: 1, name: "orange",id: 2, name: "pink",id: 3, name: "gray",id: 4, name: "cyan"], required: true, data:"",
          type: "email", name: "emailUser", label: "Email" , required: true, data:"",
          type: "text", name: "city", label: "City" , required: true, data:"",
          type: "password", name: "pass", label: "Password" , min: 6, max:20, required: true, data:"",
          type: "select", name: "teacher_id", label: "Teacher" , options:[name: "Mark",name: "Claire",name: "Daniel",name: "Gary"], required: true, data:"",
          type: "checkbox", name: "car_id", label: "Cars" , options:[id: 1, name: "bmw",id: 2, name: "audi",id: 3, name: "porche",id: 4, name: "jaguar"], required: true, data:""
        ]
      ;

      $scope.submitForm = function()
        $log.debug($scope.entity);
      
)

  .directive("dynamicName",function($compile)
    return 
        restrict:"A",
        terminal:true,
        priority:1000,
        link:function(scope,element,attrs)
            element.attr('name', scope.$eval(attrs.dynamicName));
            element.removeAttr("dynamic-name");
            $compile(element)(scope);
        
    
)

【讨论】：

我尝试了这种方法，但不知何故，当用户编辑或更改详细信息时，我的 $dirty 或 $touch 标志未设置

【参考方案3】：

如果使用 http://angular-formly.com/#/ 会不会不适合您对 JSON 模型生成的 html 表单的需求，其中所有文件都以可自定义的方式进行？