form builder angular 2 - Come costruire un array di controlli?

Question

Sto provando a creare un generatore di moduli per generare da esso un corpo di formato JSON specifico da mettere sul server, il problema che sto avendo è come rappresentare una serie di attività come indicato nel mio codice, ecco il mio builder formato:

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

e qui è il mio formato jSON che voglio ottenere dalla mia forma:

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

non funziona in questo modo:

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

Ho testato soluzione Daniel è bello ma non è vincolante per il mio modello, ecco il mio 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> 
` 

sto ottenendo l'errore (Non riesci a trovare il controllo 'Task' in [Task in])

nota che associatedTaskss è l'elenco delle attività che sto ricevendo dal server (in questo momento solo test in questo modo:

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

e qui è il formato JSON che sto mettendo su un server (Esempio preriempita con alcuni dati)

`

"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

Per includere le matrici nel gruppo modulo Potrai utilizzare la funzione FormBuilder.array().

è questo che vuoi?

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