窗體生成器角2 - 如何構建控件數組？

我想創建一個表單生成器從它生成一個特定的JSON格式的身體把它放在服務器上，我遇到的問題是如何表示如我的代碼中所示的任務數組，這裏是我的格式建設者：窗體生成器角2 - 如何構建控件數組？

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

這裏是我想從我的表格，讓我的JSON格式：

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

它不會像這樣工作：

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

我測試過丹尼爾的解決方案這很酷，但它不是綁定到我的模板，這裏是我的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> 
`

，我發現了錯誤（無法找到控制「任務」在[任務]）

注意associatedTaskss的是，我從服務器獲取我的任務列表中（現在只是測試它像這樣：

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

這裏是我把服務器上的JSON格式（有些數據爲例預填）

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

來源

2016-06-15 melina

要在你的表格你會組陣列必須使用FormBuilder.array（）函數。

這是你想要的嗎？

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

來源

2016-06-15 15:54:48

謝謝你的人，這就是我一直在尋找，我會測試它，我會給你反饋 – melina

讓我看看，如果我得到這個權利。 associatedTasks是一個任務數組{id：number，label：string}？ –

是的...... – melina

窗體生成器角2 - 如何構建控件數組？

回答

相關問題