找不到路径为：'marketplace -> 1 -> marketplace' 的控件

Question

我有一定数量的市场。我想在文本框中显示它，如果我想编辑和添加新的文本框，我必须这样做。为此我喜欢这个

 <div class="field_group" formArrayName="marketplace" >
    <div class="field_group_input last input-icon-plus" *ngFor="let markets of companyDetails.marketplace;let i = index" [formGroupName]="i">                          
  <input type="text" placeholder="Marketplace (eg: Euronext)" formControlName="marketplace" value="{{markets.marketplaceName}}">
   </div>
   </div>

并在 Ts

companyDescFormInit() {
    this.companyDescForm = this._fb.group({
      marketplace : this._fb.array( [this.createMrktFields(true)] )
    })
  }
  get formData() { return <FormArray>this.companyDescForm.get('marketplace'); }

  createMrktFields(req:boolean = false): FormGroup {
    return this._fb.group({
      marketplace: ['']
    });
  }

我得到的错误是

 Cannot find control with path: 'marketplace -> 0 -> marketplace'
    at _throwError (forms.js:1775)

Cannot find control with path: 'marketplace -> 1'
    at _throwError (forms.js:1775) 

Cannot find control with path: 'marketplace -> 1 -> marketplace'
    at _throwError (forms.js:1775)

任何人都可以告诉我我犯了什么错误我在我的项目的另一个地方遇到了同样的错误。请协助我。谢谢

Answer 1

您需要实际将数组中的值放入 formarray，然后在模板中对其进行迭代。我还将 formData 重命名为 formArr，因为它更有意义。同样在模板中，当您想为表单控件设置值时，不要使用 [value]。 Angular 不关心 [value]，只关心作为值放在 formcontrol 中的内容。

因此，当您将数据放入数组时（使其异步或同步）迭代数组并创建表单组并推送到表单数组。在这里，我在名称中添加了 Validators.required，因为我假设您希望它是必需的：

this.companyDetails.marketPlace.forEach((x) => {
  this.formArr.push(this._fb.group({
    marketplaceName: [x.marketplaceName, [Validators.required]],
    idMarketplace: [x.idMarketplace]
  }))
})

// ....

get formArr() { return <FormArray>this.companyDescForm.get('marketplace'); }

然后遍历template中的formarray，显示名字formControlName="marketplaceName":

<div formArrayName="marketplace">
 <div *ngFor="let markets of formArr.controls; let i = index" [formGroupName]="i">
    <input type="text" formControlName="marketplaceName">
 </div>
</div>

STACKBLITZ

找不到路径为：'marketplace -> 1 -> marketplace' 的控件

Cannot find control with path: 'marketplace -> 1 -> marketplace'

angular

angular6