javascript - 数组中的数组 Angular react 形式

Question

我试图以 react 形式插入标签数组，但是我在数组中得到了一个数组

从逻辑上讲，我有一个表单，表单上有一个按钮，可以调用一个单独的模式窗口，用于添加代表性联系人，我想将这些联系人收集到一个数组中，然后将其传输到主表单

模型如下

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