如何绑定angular动态表格？

Question

我在组件中有一个动态表单项。

  itemFormGroup = new FormGroup({
    x: new FormControl(4),
    y: new FormControl(1),
    z: new FormControl(0),
  });

  itemsForm = new FormGroup({
    items: new FormArray([
      this.itemFormGroup
    ])
  });

我想为输入文本绑定此行。

<table class="table table-borderless" [formGroup]="itemsForm">
    <thead>
      <tr>
        <th>x</th>
        <th>y</th>
        <th>z</th>
      </tr>
    </thead>
    <tbody formArrayName="items">
       <tr *ngFor="let item of items.controls; let i=index">
        <td><input type="text" class="form-control form-control-sm" [formControlName]="item.x"></td>
        <td><input type="text" class="form-control form-control-sm" [formControlName]="item.y"></td>
        <td><input type="text" class="form-control form-control-sm" [formControlName]="item.z" disabled></td>
      </tr>
    </tbody>
</table>

但这在浏览器上显示错误“编译失败”。

Error: src/app/app.component.html:40:43 - error TS2339: Property 'items' does not exist on type 'AppComponent'.

40            <tr *ngFor="let item of items.controls; let i=index">

Answer 1

Angular 正在您的组件实例中寻找 items 属性但找不到。

您可以创建一个 getter 如：

get items() {
  return this.itemsForm.get('items') as FormArray;
}

然后将您的 ngFor 循环替换为以下内容：

<tr *ngFor="let item of items.controls; let i=index" [formGroupName]="i">
  <td><input type="text" class="form-control form-control-sm" formControlName="x"></td>
  <td><input type="text" class="form-control form-control-sm" formControlName="y"></td>
  <td><input type="text" class="form-control form-control-sm" formControlName="z" [disabled]="true"></td>
</tr>

注意：我添加了 [formGroupName]="i" 以缩小 Angular 形式的上下文，并将 [formControlName]="item.x" 替换为字符串 formControlName="x"

如果你不想使用类型化版本，你可以去掉组件中的 get items() 并只使用：

*ngFor="let item of $any(itemsForm.get('items')).controls; let i=index"

如何绑定angular动态表格？

How to bind angular dynamic form?

angular

angular-reactive-forms

angular-forms