表格数组.找不到路径控制 [英] FormArray. Cannot find control with path

问题描述

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

组件:

ngOnInit() {const fb = this.fb;this.editForm = this.fb.group({国家:fb.control(null),标识符:this.fb.array([这个.fb.group({代码标识符:fb.control(null),numIdentifier: fb.control(null),})]),});this.organizationService.getOneById(this.id).subscribe((organization: Organization) => {让 ids: any[] = [];organization.identifiers.forEach(item => {让 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:

<ng-container formArrayName="标识符"><ng-container *ngFor="let identifier of identifiers.controls; let i=index" [formGroupName]="i"><input type="text" formControlName="codeIdentifier"><input type="text" formControlName="numIdentifier"></ng-容器></ng-容器>

出现错误:

<块引用>

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

解决方案

注意在构建时使用 array 中的 group 进行设置，如下所示:

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

• 我并不完全理解您的 Objects 结构，但这是构建控件数组以供编辑/更新目的查看的方法.

I want to output a form in which one field is an array, and for each element of the array I need to output my inputs.

Component:

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>

Got error:

Cannot find control with path: 'identifiers -> 0 -> codeIdentifier'

解决方案

Pay attention to set it with the group inside the array as you built it, like that:

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

• I didn't entirely understood your Objects structure, but this is the way to build the Control Array back to view for Edit/Update purposes.

这篇关于表格数组.找不到路径控制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！