Array in Array Angular ReactiveForms

Question

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 ContragentModel {
    id: number;
    name: string;
    okved: string[];
    representatives: RepresentativesModel[]
}


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

component is as follows

contraget$: ContragentModel;

representativesArray: RepresentativesModel[] = [];

this.formBasic = this.fb.group({
  id: 0,
  name: [''],
  okved:[''],      
  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-4">
    <label for="okved">okved</label>
        <tag-input formControlName="okved"
            [modelAsStrings]="true"
            theme='primary'>
        </tag-input>
</div>

in modal window

<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": "",  
  "okved" : [
    "123",
    "321"
  ],
  "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?

When editing, I need to insert data into the Tags Input

Loading code

async ngOnInit() {
    this.loading = false;
    this.id = this.route.snapshot.params['id'];   
    if (!this.id)
        return;
    this.onLoadingForms(this.id);
}

onLoadingForms(id: number) {
    this.contragentService.getContragent(id).subscribe((data: ContragentModel) => {
    this.contraget$ = data;
    this.onGetBuildingForms();
    })
}

onGetBuildingForms() {
    this.formBasic = this.fb.group({
    id: this.contraget$.id,
    name: this.contraget$.name,      
    okved: this.fb.array(this.contraget$.okved),      
    //representatives: this.fb.array([this.contraget$.representatives])
    })
}

and i have this error, how to insert?

ContragentDetailsComponent.html:16 ERROR TypeError: control.registerOnChange is not a function
at setUpModelChangePipeline (forms.js:2237)
at setUpControl (forms.js:2180)
at forms.js:5495
at Array.forEach (<anonymous>)
at FormGroupDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective._updateDomValue (forms.js:5490)
at FormGroupDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective.ngOnChanges (forms.js:5342)
at checkAndUpdateDirectiveInline (core.js:19337)
at checkAndUpdateNodeInline (core.js:27597)
at checkAndUpdateNode (core.js:27559)
at debugCheckAndUpdateNode (core.js:28193)

if i comment line

//okved: this.fb.array(this.contraget$.okved),

Error passes

phone: string[] ?

Tzimpo
– Tzimpo

2020-03-25 18:37:40 +00:00
Commented Mar 25, 2020 at 18:37 — Tzimpo
– Tzimpo, Commented Mar 25, 2020 at 18:37

HanJeaHwan · Accepted Answer · 2020-03-25 18:37:33Z

2

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

answered Mar 25, 2020 at 18:37

HanJeaHwan

1,0261 gold badge9 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ярослав Прохоров Over a year ago

If I try to fill a subset array, which is also connected like phones via TAGs, when I receive data from the server (editing form), I get the following error okved: this.fb.array(this.contraget$.okved) , ERROR TypeError: control.registerOnChange is not a function. The data starts to appear in the field, but some kind of error occurs

HanJeaHwan Over a year ago

@ЯрославПрохоров first i need to know how you construct the okved form control another part what is the this.contraget$.okved is a array? and where you use to bind the form control if you can create a stackblitz with simple mock people can more easy help you solve the problem

HanJeaHwan Over a year ago

@ЯрославПрохоров change the this.fb.array(this.contraget$.okved) to [this.contraget$.okved], representatives need to initial with array form because when submit u need to push a form group into it, for okved binding with input tag just need to assign value enough

Collectives™ on Stack Overflow

Array in Array Angular ReactiveForms

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related