表单数组。找不到带路径的控件答案

【问题标题】：FormArray. Cannot find control with path表单数组。找不到带路径的控件
【发布时间】：2019-11-28 07:09:23
【问题描述】：

我想输出一个表单，其中一个字段是一个数组，对于数组的每个元素，我需要输出我的输入。

组件：

ngOnInit() {
  const fb = this.fb;
  this.editForm = this.fb.group({
    country: fb.control(null),
    identifiers: this.fb.array([
       this.fb.group({
         codeIdentifier: fb.control(null),
         numIdentifier: fb.control(null),
       })
    ]),
 });
 this.organizationService.getOneById(this.id).subscribe((organization: Organization) => {
    let ids: any[] = [];
    organization.identifiers.forEach(item => {
       let id: any = { "codeIdentifier": "", "numIdentifier": "" };
       id.codeIdentifier = item.typeIdentifier.code;
       id.numIdentifier = item.numIdentifier;
       ids.push(id);
    });
     this.editForm.setControl('identifiers', this.fb.array(ids || []));
 })
}

HTML：

<div [formGroup]="editForm">
  <ng-container formArrayName="identifiers">
    <ng-container *ngFor="let identifier of identifiers.controls; let i=index" [formGroupName]="i">
      <input type="text" formControlName="codeIdentifier">
      <input type="text" formControlName="numIdentifier">
    </ng-container>
  </ng-container>
</div>

出现错误：

找不到带有路径的控件：'identifiers -> 0 -> codeIdentifier'

【问题讨论】：

尝试使用formControlName='{{i}}
您为什么将div 与formControlName 一起使用？将其更改为 input
还是一样的，没什么变化
我建议在您的 html 模板上将 formControlName="typeIdentifier" 更改为 formControlName="codeIdentifier"
@AymenKanzari 你解决了你的问题。我的问题是，如果将单个表单组添加到表单数组中，则显示 Cannot find control with path。但是如果添加了多个表单组或没有添加表单组，则没有错误。

标签： angular angular5 angular-reactive-forms

【解决方案1】：

注意在你构建它的时候用group里面的group来设置它，就像这样：

this.editForm.setControl('identifiers',
  this.fb.array(ids.map(
      id => this.fb.group({codeIdentifier: id})
    ) || [])
);

this.editForm.setControl('identifiers',
  this.fb.array(ids.map(
      id => this.fb.group({numIdentifier: id})
    ) || [])
);

我没有完全理解您的 Objects 结构，但这是将控件数组构建回视图以进行编辑/更新的方法。

【讨论】：

感谢您的回答 :) ...我正在传递对象数组（ [{text: 'asfd'}] ）而不是此类对象的表单组数组 - 例如像这样： arrayOfObjects.map(obj => this.formBuilder.group(obj)) ... :)
谢谢你，我一直在想知道什么是错的。这个答案解决了我的问题。我欠你一杯好咖啡

【解决方案2】：

标识符在您的代码中什么都不是（以及 formArray 的属性名称）

你可以选择

1.-在你的 .ts 中放一个吸气剂

get identifiers()
{
    return this.editForm.get('identifiers") as FormArray
}

2.-更改您的 .html

<ng-container *ngFor="let identifier of editForm.get('identifiers").controls;
           let i=index" [formGroupName]="i">

【讨论】：