AngularJS 动态表单，如何将模式组件放置在 html 中的所需位置

Question

我使用 Angular 模式形式创建了以下模式。但我希望名字进入 div1，年龄进入 div2。请帮助我了解如何执行此操作。

$scope.schema = {
            type: "object",
            properties: {
                "name": {
                    "type": "string",
                    "title": "Name",
                    "required": true
                },
            
            
                "age": {
                    "type": "number",
                    "title": "Age"
                }
            }
               
          };
            
          $scope.form = [
            "*",
            {
              type: "submit",
              title: "Save"
            }
          ];

<div id="div1"></div>
<div id="div2"></div>

Answer 1

我是 ASF 项目的成员之一。有 3 种方法可以到达这里。

1. 正如人们在上面提到的，一种方法是制作自定义模板(或我们所说的装饰器)。

2. 第二个是使用实验性功能 manual field insertion. (可以很好地工作)

3. 第三种方法有点复杂，但操作起来很快。即运行多个具有相同模式和模型但拆分表单定义的 ASF 实例。

JS(简体):

  $scope.schema = {
    "type": "object",
    "properties": {
      "name": {
        "type": "string",
        "title": "Name",
        "required": true
      },
      "age": {
        "type": "number",
        "title": "Age"
      }
    }

  };

  $scope.formOne = [
    "name"
  ];

  $scope.formTwo = [
    "age"
  ];

  $scope.model = {};

html 应该是这样的:

<div id="div1">
  <form sf-schema="schema" sf-form="formOne" sf-model="model"></form>
</div>
<div id="div2">
  <form sf-schema="schema" sf-form="formTwo" sf-model="model"></form>
</div>