如何获取角度形式数组中更改项的索引 [英] How to get index of changed item in angular form array

问题描述

我正在使用具有反应形式的 Angular 4.我有一个表单数组，我试图将它绑定到我在组件中跟踪的数组.我使用的是反应式表单，所以我可以进行验证，所以我不想使用模板表单方法.

I'm using Angular 4 with reactive forms. I have a form array that I am trying to tie to an array I keep track of in my component. I'm using reactive forms so I can have the validation, so I don't want to use the template forms approach.

我将项目添加到表单数组中，如下所示:

I add items to the form array like so:

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 显然是我的反应形式 FormGroup.订单是我从 API 获取的对象，我想更新其值，包括行详细信息.我想我应该在每个 newGroup 上使用 'valueChanges.subscribe'，但我不确定如何获取已更改项目的索引.有什么想法吗?

The orderForm is obviously my reactive forms FormGroup. the order is my object I get from my API and I want to update its values, including the line details. I think I should use 'valueChanges.subscribe' on each newGroup but I'm not sure how to get the index of the item that was changed. Any thoughts?

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

这是该部分的 HTML:

Here's the HTML for this portion:

<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>

推荐答案

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

I would not use the valueChanges here, it would be fired excessively, specially if the array has many values.

您可以对每个值设置一个更改事件，然后只传递值和索引，例如

You could have a change event on each value, and just pass the value and index, something like

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

但是这种与反应式形式的目的不符.

But this kind of fights the purpose of the reactive form.

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

Even though you have plenty of values that you do not want to show in form, and it is values that the user cannot modify, I'd just add them to the form anyway as form controls, nothing says that you need to show them in template!

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

This way, if you build the form in a way that it would match your model order, you could just directly assign the form value to your model upon submit. I highly recommend this approach.

这篇关于如何获取角度形式数组中更改项的索引的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！