Array in Array Angular ReactiveForms

1 answer

I am trying to insert an array of tags in reactive form, however I get an array in an array

logically, I have a form, on the form there is a button that calls up a separate modal window, for adding representative contacts, I want to collect these contacts into an array, which I then transfer to the main form

The model is as follows

export class RepresentativesModel {     id: number;     surname: string;     name: string;     middleName: string;     email: string;     phone: string[] }     

component is as follows

representativesArray: RepresentativesModel[] = [];  this.formBasic = this.fb.group({   id: 0,   name: [''],         representatives: this.fb.array([]) }); 

Submit Button logics

const RepresentativeItems = this.formBasic.get('representatives') as FormArray;  this.representativesArray.forEach(element => {   const phones = new FormArray([     new FormControl(element.phone)   ])   RepresentativeItems.push(this.fb.group({     id: element.id,     surname: element.surname,     name: element.name,     middleName: element.middleName,     email: element.email,     phone: phones   })); }); 

HTML Controls is as follows

<div class="col-md-12">     <label for="phone">Contact Phones</label>     <tag-input formControlName="phone"         [modelAsStrings]="true"         theme='primary'>     </tag-input> </div> 

The result that I get, a little confuses me and I do not know how to solve it

{   "id": 0,   "name": "",     "representatives": [     {       "id": 0,       "surname": "First Name",       "name": "Last Name",       "middleName": "Middle Name",       "email": "[email protected]",       "phone": [                      <-- ARRAY 1          [                            <-- ARRAY 2             "123456",             "654321",             "1111"          ]       ]     }   ] } 

but how to fix this array in an array?

All answers to this question, which has the identifier 60854812

The best answer:

Use formBuilder array method should solve your problem. Your this part of code is creating nested array

 const phones = new FormArray([    new FormControl(element.phone)  ]) 

change to this

const phones = this.fb.array(element.phone); 

https://stackblitz.com/edit/angular-hev9ip

Last questions

how do i remove the switch on my home screen?
how to edit the JS date and time to update atuomatically?
How to utilize data stored in a multidimensional array
Powermockito not mocking URL constructor in URI.toURL() method
Android Bluetooth LE Scanner only scans when phone's Location is turned on in some devices
docker wordpress container can't connect to mysql container
How can I declare a number in java that is more than 64-bits? [duplicate]
Optaplanner solutionClass entityCollectionProperty should never return null error when simple JSON object passed to controller
Anylogic, get the time a pedestrain is in a queue
How do I fix this syntax issue with my .flex file?
Optimizing query in PHP
How to find the highest number of a column and print two columns of that row in R?
Ideas on “Error: Type com.google.firebase.iid.zzav is referenced as an interface from com.google.firebase.messaging.zzd”?
JCIFS SmbFile.exists() and SmbFile.isDirectory() return false when it exists and I can listFiles()
PHP total order
Laravel booking system design
neural net - undefined column selected
How to indicate y axis does not start from 0 in ggplot?
Fragments in backStack
Spinner how to change the data