angular - 如何获取 Angular 形式数组中已更改项目的索引

Question

我正在使用具有反应形式的 Angular 4。我有一个表单数组，我试图将其绑定(bind)到我在组件中跟踪的数组。我正在使用响应式表单以便进行验证，所以我不想使用模板表单方法。

我像这样将项目添加到表单数组中:

createFormWithModel() {
  this.orderForm = this.fb.group({
    orderNumber: [this.order.ProductBookingOrder],
    orderDate: [this.order.PurchaseOrderIssuedDate],
    lineDetailsArray: this.fb.array([])
  })

  const arrayControl = <FormArray>this.orderForm.controls['lineDetailsArray'];
  this.order.ProductBookingDetails.forEach(item => {
    let newGroup = this.fb.group({
      ProductName: [item.ProductName],
      Quantity: [item.ProductQuantity.Quantity],
      UOM: [item.ProductQuantity.UOM],
      RequestedShipDate: [item.RequestedShipDate]
    })
  })
}

orderForm 显然是我的 react 形式 FormGroup。订单是我从我的 API 获得的对象，我想更新它的值，包括行详细信息。我想我应该在每个 newGroup 上使用“valueChanges.subscribe”，但我不确定如何获取已更改项目的索引。有什么想法吗？

     newGroup.valueChanges.subscribe('i want value and index some how' => {
this.order.ProductbookingDetails[index].ProductName = value.ProductName;
    });

这是这部分的 HTML:

<tbody formArrayName="lineDetailsArray">
        <tr [formGroupName]="i" *ngFor="let line of orderForm.controls['lineDetailsArray'].controls; index as i">
          <td><input class="form-control" type="text" placeholder="Product Name" formControlName="ProductName" required/></td>
          <td><input class="form-control" type="number" step=".01" (focus)="$event.target.select()" placeholder="Quantity" formControlName="Quantity"/></td>
          <td><input class="form-control" readonly formControlName="UOM"></td>
          <td><date-picker formControlName="RequestedShipDate" format="L" [showClearButton]="false"></date-picker></td>
          <td><button type="button" (click)="deleteLineDetail(i)">Remove</button></td>
        </tr>
      </tbody>

Answer 1

我不会在这里使用 valueChanges，它会被过度触发，特别是当数组有很多值时。

你可以对每个值都有一个更改事件，然后只传递值和索引，比如

(keyup)="changeValue(line.controls.ProductName.value, i)"

但是这种对抗 react 形式的目的。

即使您有很多不想在表单中显示的值，而且用户无法修改这些值，但我只是将它们作为表单控件添加到表单中，没有任何说明您需要在模板中显示它们!

这样，如果您以匹配模型 order 的方式构建表单，您可以在提交时直接将表单值分配给模型。我强烈推荐这种方法。