title: form builder angular 2 - How to construct an array of controls?
body: <p>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 :</p>
  <pre><code>    this.form = fb.group({          
                 Action: fb.group({
                  label: [],
                  actionType: [],
                  description: [],
                  HTTPMethod: [],
                  ressourcePattern: [],
                  status: [],
                  parameters: [],
                  linkedprocess: fb.group({
                  process: fb.group({
                      label: []
                  }),
                  /////////////////////
                  associatedTasks:[],     // =&gt; here i want to represent the associated tasks
                      task: fb.group({   // it's an array of task 
                          label:[]
                      })
                  /////////////////////
                 }),
                  labelParam: [],
                  descriptionParam: []
                 })
              });
      
  </code></pre>
  <p>and here is my json format that i want to get from my form:</p>
  <pre><code>    {&quot;Action&quot;:       {
               &quot;label&quot;: &quot;A7791&quot;,
               &quot;HTTPMethod&quot;: &quot;POST&quot;,
               &quot;actionType&quot;: &quot;indexation&quot;,
               &quot;status&quot;: &quot;active&quot;,
               &quot;description&quot;: &quot;descroption new&quot;,
               &quot;resourcePattern&quot;: &quot;&quot;,
               &quot;creationDate&quot;: &quot;30-05-2016 06:14:09&quot;,
               &quot;modificationDate&quot;: &quot;13-06-2016 11:51:10&quot;,
               &quot;parameters&quot;: [],
               &quot;linkedProcess&quot;: {&quot;Process&quot;: {&quot;label&quot;: &quot;P1&quot;}},
               &quot;associatedTasks&quot;: [{&quot;Task&quot;: {&quot;label&quot;: &quot;T1&quot;}}]
            }}
      
  </code></pre>
  <p>it doesn't work like this :</p>
  <pre><code>    associatedTasks:[
                    task: fb.group({
                      label:[]
                  })
      ]
  </code></pre>
  <p><strong>i've tested Daniel solution it's cool but it's not binding to my template, here is my html :</strong></p>
  <p>`</p>
  <pre><code>&lt;div class=&quot;form-group&quot; &gt;
      &lt;label for=&quot;Task&quot;&gt;associatedTasks&lt;/label&gt;
      &lt;select
          ngControl=&quot;Task&quot; #frequency=&quot;ngForm&quot; 
          id=&quot;Task&quot; class=&quot;form-control&quot; 
          required&gt;
          &lt;option value=&quot;&quot;&gt;&lt;/option&gt;
          &lt;option *ngFor=&quot;#taske of associatedTaskss&quot; value=&quot;{{ taske.id }}&quot; &gt;
             {{ taske.label}}
          &lt;/option&gt;
      &lt;/select&gt; 
   `
  </code></pre>
  <p>i'm getting the error <strong>(Cannot find control 'Task' in [Task in ])</strong></p>
  <p>note that associatedTaskss is the list of tasks that i'm getting from server ( right now just testing it like this :</p>
  <pre><code>`
   associatedTaskss=[
          {id :1, label:'T1'},
          {id :2, label:'T2'},
          {id :3, label:'T3'},
          {id :4, label:'T4'}
      ];
  ` 
  </code></pre>
  <p>and here is the JSON format that i'm putting on server (exemple prefilled with some data)</p>
  <p>`</p>
  <pre><code>&quot;Action&quot;: {
            &quot;label&quot;: &quot;A1&quot;,
            &quot;HTTPMethod&quot;: &quot;POST&quot;,
            &quot;actionType&quot;: &quot;indexation&quot;,
            &quot;status&quot;: &quot;active&quot;,
            &quot;description&quot;: &quot;Ajout d'une transcription dans le lac de données&quot;,
            &quot;resourcePattern&quot;: &quot;transcriptions/&quot;,
            &quot;parameters&quot;: [
              {
                &quot;Parameter&quot;: {
                  &quot;label&quot;: &quot;&quot;,
                  &quot;description&quot;: &quot;Flux JSON à indexer&quot;,
                  &quot;identifier&quot;: &quot;2&quot;,
                  &quot;parameterType&quot;: &quot;body&quot;,
                  &quot;dataType&quot;: &quot;json&quot;,
                  &quot;requestType&quot;: &quot;Action&quot;,
                  &quot;processParameter&quot;: {
                    &quot;label&quot;: &quot;&quot;,
                    &quot;description&quot;: &quot;Flux JSON à indexer&quot;,
                    &quot;identifier&quot;: &quot;4&quot;,
                    &quot;parameterType&quot;: &quot;body&quot;,
                    &quot;dataType&quot;: &quot;json&quot;,
                    &quot;requestType&quot;: &quot;Process&quot;
                  }
                }
              },
              {
                &quot;Parameter&quot;: {
                  &quot;label&quot;: &quot;collection&quot;,
                  &quot;description&quot;: &quot;Identifiant d'une collection dans la base de données orientée document&quot;,
                  &quot;identifier&quot;: &quot;10&quot;,
                  &quot;parameterType&quot;: &quot;URI&quot;,
                  &quot;dataType&quot;: &quot;string&quot;,
                  &quot;defaultValue&quot;: &quot;transcriptions&quot;,
                  &quot;requestType&quot;: &quot;Action&quot;,
                  &quot;processParameter&quot;: {
                    &quot;label&quot;: &quot;collection&quot;,
                    &quot;description&quot;: &quot;Identifiant d'une collection dans la base de données orientée document&quot;,
                    &quot;identifier&quot;: &quot;1&quot;,
                    &quot;parameterType&quot;: &quot;URI&quot;,
                    &quot;dataType&quot;: &quot;string&quot;,
                    &quot;requestType&quot;: &quot;Process&quot;
                  }
                }
              }
            ],
            &quot;linkedProcess&quot;: {
              &quot;Process&quot;: {
                &quot;label&quot;: &quot;P1&quot;
              }
            },
            &quot;associatedTasks&quot;: [
              {
                &quot;Task&quot;: {
                  &quot;label&quot;: &quot;T1&quot;
                }
              }
            ]
          }
  </code></pre>
  <p>`</p>