Form Builder Winkel 2 - Wie konstruiere ich ein Array von Steuerelementen?

Question

Ich versuche, einen Formular-Generator zu erstellen, um daraus einen bestimmten JSON-Formatkörper zu erzeugen, um ihn auf den Server zu stellen. Das Problem, das ich habe, ist ein Array von Aufgaben darzustellen, wie in meinem Code angegeben Format Bauer:

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

und hier ist mein json-Format, das ich von meiner Form erhalten möchten:

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

es nicht funktioniert wie folgt aus:

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

i Daniel Lösung getestet haben, es ist cool, aber es ist zu meiner Vorlage nicht verbindlich sind, hier ist mein 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> 
` 

ich erhalte den Fehler (kann nicht die Kontrolle‚Aufgabe‘finden in [Aufgabe in])

beachten sie, dass associatedTaskss die Liste der Aufgaben ist, dass ich vom Server bekommen (jetzt testen es wie folgt aus:

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

und hier ist das JSON-Format, das ich auf dem Server setzen bin (exemple mit einigen Daten vorbelegt)

`

"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

Um Arrays in Ihrer Form Gruppe gehören Sie werde muss die FormBuilder.array() -Funktion verwenden.

ist das was du willst?

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