首页 文章

如何获取角形数组中已更改项的索引

提问于
浏览 次
8

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

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

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'，但我不知道如何获得已更改的项的索引 . 有什么想法吗？

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>
angular angular-reactive-forms formarray

3 回答

  • 4

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

    你可以在每个值上有一个change事件，只需传递值和索引，就像这样

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

    但这种反应形式的目的 .

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

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

    回复于
  • 6
    export class CustomFormArray {
     public form: FormGroup;

     public get someArray(): FormArray {
          return this.form.get('someArray') as FormArray
     }

     constructor(private _fb: FormBuilder) {
          this.form = _fb.group({
               someArray: _fb.array([])
          });

          this.someArray.controls.forEach(
               control => {
                   control.valueChanges.subscribe(
                        () => {
                       console.log(this.someArray.controls.indexOf(control)) // logs index of changed item in form array
                        }
                   )
               }
          )
     }
}
    回复于
  • 0

    您可以为要在表单数组中维护的项创建自己的组件 . 对于每次更新，删除等，您向父组件发出一个事件，并且您可以使用在父组件中绑定的事件发出的索引，或者您在模板中的父组件中具有索引，以将其用作用于绑定到子组件的change事件的函数的附加输入参数 .

    阅读这篇文章，你就会理解我的意思：

    https://medium.com/spektrakel-blog/angular2-building-nested-reactive-forms-7978ecd145e4

    回复于

相关问题