6

我正在尝试创建一个表单构建器以从中生成特定的 JSON 格式主体以将其放在服务器上，我遇到的问题是如何表示我的代码中指示的任务数组，这是我的格式构建器：

    this.form = fb.group({          
               Action: fb.group({
                label: [],
                actionType: [],
                description: [],
                HTTPMethod: [],
                ressourcePattern: [],
                status: [],
                parameters: [],
                linkedprocess: fb.group({
                process: fb.group({
                    label: []
                }),
                /////////////////////
                associatedTasks:[],     // => here i want to represent the associated tasks
                    task: fb.group({   // it's an array of task 
                        label:[]
                    })
                /////////////////////
               }),
                labelParam: [],
                descriptionParam: []
               })
            });

这是我想从我的表单中获取的 json 格式：

    {"Action":       {
             "label": "A7791",
             "HTTPMethod": "POST",
             "actionType": "indexation",
             "status": "active",
             "description": "descroption new",
             "resourcePattern": "",
             "creationDate": "30-05-2016 06:14:09",
             "modificationDate": "13-06-2016 11:51:10",
             "parameters": [],
             "linkedProcess": {"Process": {"label": "P1"}},
             "associatedTasks": [{"Task": {"label": "T1"}}]
          }}

它不像这样工作：

    associatedTasks:[
                  task: fb.group({
                    label:[]
                })
    ]

我已经测试了 Daniel 解决方案，它很酷，但它没有绑定到我的模板，这是我的 html：

`

<div class="form-group" >
    <label for="Task">associatedTasks</label>
    <select
        ngControl="Task" #frequency="ngForm" 
        id="Task" class="form-control" 
        required>
        <option value=""></option>
        <option *ngFor="#taske of associatedTaskss" value="{{ taske.id }}" >
           {{ taske.label}}
        </option>
    </select> 
 `

我收到错误消息（在 [Task in ] 中找不到控件“任务”）

请注意， associatedTaskss 是我从服务器获取的任务列表（现在只是像这样测试它：

`
 associatedTaskss=[
        {id :1, label:'T1'},
        {id :2, label:'T2'},
        {id :3, label:'T3'},
        {id :4, label:'T4'}
    ];
`

这是我放在服务器上的 JSON 格式（预填充了一些数据的示例）

`

"Action": {
          "label": "A1",
          "HTTPMethod": "POST",
          "actionType": "indexation",
          "status": "active",
          "description": "Ajout d'une transcription dans le lac de données",
          "resourcePattern": "transcriptions/",
          "parameters": [
            {
              "Parameter": {
                "label": "",
                "description": "Flux JSON à indexer",
                "identifier": "2",
                "parameterType": "body",
                "dataType": "json",
                "requestType": "Action",
                "processParameter": {
                  "label": "",
                  "description": "Flux JSON à indexer",
                  "identifier": "4",
                  "parameterType": "body",
                  "dataType": "json",
                  "requestType": "Process"
                }
              }
            },
            {
              "Parameter": {
                "label": "collection",
                "description": "Identifiant d'une collection dans la base de données orientée document",
                "identifier": "10",
                "parameterType": "URI",
                "dataType": "string",
                "defaultValue": "transcriptions",
                "requestType": "Action",
                "processParameter": {
                  "label": "collection",
                  "description": "Identifiant d'une collection dans la base de données orientée document",
                  "identifier": "1",
                  "parameterType": "URI",
                  "dataType": "string",
                  "requestType": "Process"
                }
              }
            }
          ],
          "linkedProcess": {
            "Process": {
              "label": "P1"
            }
          },
          "associatedTasks": [
            {
              "Task": {
                "label": "T1"
              }
            }
          ]
        }

`

4

1 回答 1

4

要在表单组中包含数组，您必须使用 FormBuilder.array() 函数。

这是你想要的吗？

this.form = _fb.group({
  Action: _fb.group({
    label: [],
    HTTPMehotd: [],
    actionType: [],
    status: [],
    description: [],
    resourcePattern: [],
    creationDate: [],
    modificationDate: [],
    parameters: _fb.array([]),
    linkedProcess: _fb.group({
      Process: _fb.group({
        'label': []
      })
    }),
    associatedTasks: _fb.array([
      _fb.group({
        Task: _fb.group({
          label: []
        })
      })  
    ])
  })
})

于 2016-06-15T15:54:48.113 回答