Geek Answers Handbook

Form builder angular 2 - How to build an array of controls?

I am trying to create a form builder to create a specific JSON format body from it in order to place it on the server, the problem I am facing is the representation of an array of tasks, as indicated in my code, here is my format:

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 an array of task label:[] }) ///////////////////// }), labelParam: [], descriptionParam: [] }) });

and here is my json format that I want to get from my form:

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

It does not work as follows:

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

I tested Daniel's solution, but it is not tied to my template, here is my 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> `

I get an error (Cannot find "Task" in [Task]]

Note that associatedTaskss is a list of tasks that I get from the server (right now, just checking it as follows:

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

and here is the JSON format that I host on the server (for example, pre-populated with some data)

`

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

`

+6
source share
1 answer

To include arrays in your form group, you have to use the FormBuilder.array () function.

Is this what you want?

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

More articles:


All Articles