https://medium.com/spektrakel-blog/angular2-building-nested-reactive-forms-7978ecd145e4
ользую 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, и я хочу обновить его значения, включая подробности строки. Я думаю, что я должен использовать '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>