form builder angular 2 - How to construct an array of controls?

Question

I'm trying to create a form builder to generate from it a specific JSON format body to put it on server, the problem that i'm having is how to represent an array of task like indicated in my code ,here is my format builder :

    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: []
               })
            });
    

and here is my json format that i want to get from my form:

    {"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"}}]
          }}
    

it doesn't work like this :

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

i've tested Daniel solution it's cool but it's not binding to my template, here is my 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> 
 `

i'm getting the error (Cannot find control 'Task' in [Task in ])

note that associatedTaskss is the list of tasks that i'm getting from server ( right now just testing it like this :

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

and here is the JSON format that i'm putting on server (exemple prefilled with some data)

`

"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"
              }
            }
          ]
        }

`

Answer 1

To include arrays in your form group you'll have to use the FormBuilder.array() function.

is this what you want?

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: []
        })
      })  
    ])
  })
})