Formator budowniczy kątowy 2 - Jak skonstruować tablicę kontrolną?

Question

Próbuję utworzyć program do tworzenia formularzy, aby wygenerować z niego konkretny format formatu JSON, aby umieścić go na serwerze, problem, który mam, polega na tym, jak reprezentować tablicę zadań, jak wskazano w moim kodzie, tutaj jest mój Format budowniczy:

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

i tu jest moje formatu JSON, że chcę, aby dostać się z moim formularzu:

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

to nie działa tak:

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

Przetestowałem Daniel rozwiązanie to jest fajne, ale to nie jest wiążące do mojego szablonu, tu jest mój 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> 
` 

Dostaję błąd (nie można znaleźć Control„zadanie” w [zadaniem w])

pamiętać, że associatedTaskss lista zadań, które dostaję od serwera (teraz tylko testowanie go tak:

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

i tutaj jest format JSON, że jestem umieszczenie na serwerze (exemple napełnione z niektórych danych)

`

"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

Aby umieścić tablice w grupie formularza będziesz muszą używać funkcji FormBuilder.array().

czy tego chcesz?

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