FormArray。找不到路径控制

时间:2018-10-25 12:33:57

标签: angular angular5 angular-reactive-forms

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

组件:

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>

错误:

  

找不到具有以下路径的控件:“标识符-> 0-> codeIdentifier”

2 个答案:

答案 0 :(得分:0)

标识符在您的代码中什么都不是(以及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">

答案 1 :(得分:0)

在构建时,请注意在group内的array内进行设置,如下所示:

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结构,但这是将控制阵列构建回视图以进行编辑/更新的方式。