如何在Angular中从JSON创建动态表单？

Question

我正在尝试使用JSON在Angular中制作表单。当我只有一个JSON文件时很容易，因为我编写我的HTML并使用迭代显示表单字段。现在，如果我有3或4个JSON文件，我需要生成具有不同ID的不同表单并显示它。我能不能生成动态表单？

我拿取两个按钮，从文件“A”和“B”获取JSON数据。我需要在点击时显示不同的表单。 plunker

$scope.getFromAFile = function() {
  // body...
  var inputs=[];
  $http.get('a.json')
    .success(function (data) {
      $scope.formInputs = data.input;
      angular.forEach($scope.formInputs, function(value, key) {
          /* do something for all key: value pairs */
          inputs.push({
            "value": value.value,
            "inputValues": value.inputValues,
            "type": value.inputType.toLowerCase(),
            "name": value.name,
            "required": value.required
          })
      });
      getFormfromData(inputs,'BID');
    })
    .error(function(err){
        alert(err);
    });
}

$scope.getFromBFile = function() {

// body...
$http.get('b.json')
  .success(function (data) {
    var inputs=[];
    $scope.formInputs = data.input;
    angular.forEach($scope.formInputs, function (value, key) {
        /* do something for all key: value pairs */
        inputs.push({
          "value": value.value,
          "inputValues": value.inputValues,
          "type": value.inputType.toLowerCase(),
          "name": value.name,
          "required": value.required
        });
    });
    getFormfromData(inputs,'BID');
  })
  .error(function (err) {
    alert(err);
  });

- user3703527

Answer 1

有很好的“库”可以从JSON构建表单。这里仅提到其中2个：

• http://formly-js.github.io/angular-formly/#!/
• https://github.com/json-schema-form/angular-schema-form

- apairet

---

你能分享一下 Plunker 吗？我不知道该如何将其与 Angular 集成。 - user3703527

看这个问题...http://stackoverflow.com/questions/25246652/how-to-make-form-in-angular-dynamically - user3703527

请参考这个plunker的例子，了解如何使用formly-angular：http://plnkr.co/edit/dUiO4aWXQoZlyuE6L5iy。请注意，select存在一个小问题，我已经创建了一个PR https://github.com/nimbly/angular-formly/pull/61 请接受这个答案。 - apairet

感谢你的回答...我正在寻找它，但是现在有一个问题，我该如何验证这个表单 http://plnkr.co/edit/7IU7WNKjS6NgTus537K5?p=preview - user3703527

又一个由我所在公司开发的库：https://github.com/Textalk/angular-schema-form/ - Josef Engelfrost

Answer 2

我建议您使用库来完成这项任务，因为当您已经拥有现成的组件时，为什么要重新发明轮子呢？

请使用Alpaca JS：http://www.alpacajs.org/ 它允许你使用简单的JSON结构来创建HTML表单，例如：

$(function() {
  $("#form1").alpaca({
    "schema": {
      "title": "User Feedback",
      "description": "What do you think about Alpaca?",
      "type": "object",
      "properties": {
        "name": {
          "type": "string",
          "title": "Name"
        },
        "ranking": {
          "type": "string",
          "title": "Ranking",
          "enum": ['excellent', 'not too shabby', 'alpaca built my hotrod']
        }
      }
    }
  });
});

这段话的翻译是：“这个的输出结果会类似于”。同时需要保留HTML标签，不做解释。

- Manish Kr. Shukla

---

所以你能在我的 JSON 中使用吗？我不知道该如何在 Angular 中使用，请与 Angular 集成。 - user3703527

有时候你可能需要修改你的JSON以符合alpaca所需的格式。 - Manish Kr. Shukla

但我不能改变json..我只是从json中获取值并创建自己的json，然后我们可以创建。 - user3703527

换句话说，我获取JSON值并创建自己的JSON对象。从该对象中创建视图？因为JSON文件不在我的手中，它将以相同的格式出现。 - user3703527

我们可以这样做吗？你有任何想法吗？ - user3703527