如何获取角形数组中已更改项的索引
发布时间:2020-12-17 08:48:34 所属栏目:安全 来源:网络整理
导读:我正在使用带反应形式的Angular 4.我有一个表单数组,我试图绑定到我在组件中跟踪的数组.我正在使用反应式表单,所以我可以进行验证,所以我不想使用模板表单方法. 我将项添加到表单数组中,如下所示: createFormWithModel() { this.orderForm = this.fb.group(
我正在使用带反应形式的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>
我不会在这里使用valueChanges,它会被过度激发,特别是如果数组有很多值.
你可以在每个值上有一个更改事件,只需传递值和索引,例如 (keyup)="changeValue(line.controls.ProductName.value,i)" 但这种对抗反应形式的目的. 即使你有很多你不希望在表单中显示的值,并且它是用户无法修改的值,我只是将它们作为表单控件添加到表单中,没有任何内容表明你需要在表单中显示它们模板! 这样,如果您以与模型订单匹配的方式构建表单,则可以在提交时直接将表单值分配给模型.我强烈推荐这种方法. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |