Question

所以，我对angularjs有点新意，想学习如何从外部json生成表单ui，例如。目前我正在使用https://randomform.herokuapp.com

每次我想使用json组件生成新表单，以及如何在成功输入数据时提交表单。

我可以获取对象变量，但不知道如何使用它来创建输入元素。

// Angular JS Code
import angular from 'angular';
var app = angular.module('randomForm',[]);
//Getform controller

app.controller('getFormCtrl',function($scope ,$http, $log){

  //fetch response on click
 $scope.clickButton = function(){
   $http.get("https://randomform.herokuapp.com")
   .then(function(response){
       //storing the response
        $scope.form_dt = response;
        //log the response
        $log.info(response);

   },
  function(response){
  //Handles Error
   $scope.form = "Something Went Wrong";
 })}

});

和html文件：

<div class="container center" ng-controller="getFormCtrl">
            <!-- Form -->

     <button ng-click="clickButton()" class="btn">Get Form</button>


             <form class="myForm" ng-repeat="field in form_dt.data.data.form_fields">
                <h1>Form ID : {{form_dt.data.data.form_id}}</h1>
                <h1>Form Name : {{form_dt.data.data.form_name}}</h1>

              <div class="fields">   
                  <input type="field.component">
                       <h2> Label : {{field.label}}</h2>
                       <h2> Type :  {{field.component}} </h1>
                       <h2> Description : {{field.description}}</h2>
                       <h2> Editable : {{field.editable}}</h2>
                       <h2> Options : {{field.options}}</h2>
                       <h2> Required : {{field.required}}</h2>
                       <h2> Validation : {{field.validation}}</h2>
                       <h2> AutoSelect : {{field.autoselect}}</h2>
                       <h2> Autofill : {{field.autofill}}</h2> 
              </div>

              <button type="submit" class="btn">Submit Form</button>
          </form>


  </div>

请帮助。

Answer 1

您需要根据component值分别构建每个输入。这是一个简单的plunkr，它为radio组件和textinput组件执行此操作。您可能需要点击＆＃34;新表格＆＃34;因为我只实现了两个潜在的组件。我建议在ng-switch内使用ng-repeat作为字段，这将具有实现每个component类型的必要逻辑。

<div ng-switch="field.component">
  <div ng-switch-when="radio">
    <div ng-repeat="option in field.options" class="radio">
      <label><input ng-model="field.value" name="$parent.$index" type="radio" value="{{option}}"/>{{option}}</label>
    </div>
  </div>
    <div ng-switch-when="textinput">
      <input class="form-control" ng-model="field.value" />
    </div>
  </div>
  <!-- IMPLEMENT OTHER COMPONENT TYPES HERE -->
</div>

请注意，您不能像上面那样将type的{{1}}设置为input，因为根据field.component类型，您可以＆＃ 39; ll需要以不同的方式构造事物（例如component组件类型的textarea元素或textarea组件类型的input元素。“

https://plnkr.co/edit/kRf9cuIVrTgGezKwvSFS

Answer 2

你要的是一段相当复杂的代码。但我可以帮你推动正确的方向。

您的数据需要ng-repeat。所以说你的数据在$scope.formData，我将使用从你的网站获取的这组随机数据：

{
  "data": {
    "form_fields": [
      {
        "autofill": 70, 
        "component": "textinput", 
        "description": "enim totam aliquid suscipit et incididunt reiciendis", 
        "editable": false, 
        "label": "quam consectetur perspiciatis", 
        "required": true, 
        "validation": "^[0-9]+$"
      }, 
      {
        "component": "textarea", 
        "description": "nisi maiores ducimus fugiat sint pariaturat rerum cupidatat", 
        "editable": true, 
        "label": "voluptatum asperiores", 
        "required": false, 
        "validation": "^(.|\\n)+$"
      }
    ], 
    "form_id": "4Dwh0VTOfW41", 
    "form_name": "velit maxime qui"
  }, 
  "success": true
}

你希望你的模板是这样的：

<div nr-repeat="field in formData.data.form_fields">
  <div ng-if="field.component = 'textinput'">
    <label>{{field.label}}
      <input type="text" {{field.required?'required':''}} pattern="{{field.validation}}" {{field.editable?'':'disabled'}} ...etc.../>
    </label>
  </div>
  <div ng-if="field.component = 'textarea'">
    <label>{{field.label}}
      <textarea {{field.required?'required':''}} pattern="{{field.validation}}" {{field.editable?'':'disabled'}}></textarea>
    </label>
  </div>
  ... Put others here ...
</div>

现在这还远未完成，你可能想要改变一些工作的方式，但这应该有助于你开始。

如何使用AngularJS获取JSON来创建表单UI

2 个答案: