Question

基于这个帖子：formArray in a tbody with only one colum to be validated我设法用值正确显示我的网格。问题是，如果我在同一页面上具有相同的网格实例，则第一个网格的值将显示在第二个网格中。我认为这是预期的行为，因为它们具有相同的 formGroupName 和相同的 formArrayName 。

您可以在此处查看行为：http://recordit.co/HxuFJpVRQP

那是我的HTML：

  <tbody *ngIf="editMode" formArrayName="itemsForm">
    <tr *ngFor="let item of parentForm.controls.itemsForm.controls; let i = index" >
      <ng-container formGroupName="{{i}}">
        <td><span>{{ item.value.categoryName }}</span></td>
        <td><input type="number" tabindex="1" autocomplete="off" formControlName="value" /></td>
        <td>
          <app-status [status]="item.value.status"></app-status>
        </td>
      </ng-container>
    </tr>
  </tbody>

那是我的TypeScript：

  public ngOnInit(): void {
    this.createForm();
  }

  private createForm(): void {
    let controls = new FormArray([]);

    // the data you have received, for each object create a form group
    this.items.forEach(item => {
      controls.push(new FormGroup(
        {
          categoryName: new FormControl(item.categoryName),
          value: new FormControl(item.value),
          status: new FormControl(item.status)
        }));
    });

    this.parentForm.addControl("itemsForm", controls);
  }

如果我只有一个网格，这一切都像一个魅力。我必须给我的组件一个Id吗？这真的有必要吗？

修改

我通过将 formArrayName 作为 @Input 参数传递来解决此问题：

@Input() public itemsForm;

public ngOnInit(): void {
  this.createForm();
}

private createForm(): void {
  let controls = new FormArray([]);

  // the data you have received, for each object create a form group
  this.items.forEach(item => {
    controls.push(new FormGroup(
    {
      categoryName: new FormControl(item.categoryName),
      value: new FormControl(item.value),
      status: new FormControl(item.status)
    }));
  });

  this.parentForm.addControl(this.itemsForm, controls);
}

现在在我的父组件中，我只需为itemsForm属性为子组件的每个实例赋予不同的名称：

<app-my-grid [itemsForm]="'arrayNamed1'" *ngIf="datasource1" [parentForm]="prognoseMeldungForm" [items]="datasource1" [editMode]="isEditMode"></app-my-grid>

<app-my-grid [itemsForm]="'arrayNamed2'" *ngIf="datasource2" [parentForm]="prognoseMeldungForm" [items]="datasource2" [editMode]="isEditMode"></app-my-grid>

这有意义吗？

如何处理formArrayName / formGroupName的两个实例？

0 个答案: