Array in Array Angular ReactiveForms

Question

Я пытаюсь вставить массив тегов в реактивной форме, однако я получаю массив в массиве

логически, у меня есть форма, на форме есть кнопка, которая вызывает отдельный модальный Окно, для добавления представительных контактов, я хочу собрать эти контакты в массив, который я затем перенести в основную форму

Модель выглядит следующим образом

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

Компонент выглядит следующим образом

contraget$: ContragentModel;

representativesArray: RepresentativesModel[] = [];

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

Отправить кнопку логики

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 Управление осуществляется следующим образом

<div class="col-md-4">
    <label for="okved">okved</label>
        <tag-input formControlName="okved"
            [modelAsStrings]="true"
            theme='primary'>
        </tag-input>
</div>

в модальном окне

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

Результат что я получаю, меня немного смущает и я не знаю как это решить

{
  "id": 0,
  "name": "",  
  "okved" : [
    "123",
    "321"
  ],
  "representatives": [
    {
      "id": 0,
      "surname": "First Name",
      "name": "Last Name",
      "middleName": "Middle Name",
      "email": "mail@mail.ru",
      "phone": [                      <-- ARRAY 1
         [                            <-- ARRAY 2
            "123456",
            "654321",
            "1111"
         ]
      ]
    }
  ]
}

но как исправить этот массив в массиве?

При редактировании мне нужно вставить данные во ввод тегов

Код загрузки

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

и у меня есть эта ошибка, как вставить?

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)

, если я прокомментирую строку

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

Ошибка проходит

Answer 1

Использование метода массива formBuilder должно решить вашу проблему. Эта часть кода создает вложенный массив

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

и заменяется этим

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

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