我正在使用带反应形式的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>
