Ниже мой FormArray, я хотел бы обновить один ввод на основе изменения значения на другом входе. Всякий раз, когда пользователь меняет продукт, служба получает цену и taxPercent, которые необходимо исправить для этого индекса в массиве форм, и когда количество добавлено, я хотел бы исправить totalAmount. Это было легко, когда это была просто formControlElements, подписавшись на соответствующие valueChanges и указав соответствующие поля. Как я могу сделать то же самое в FormArray?
<div formArrayName="products" *ngFor="let product of productsArray.controls; let i=index">
<div [formGroupName]="i">
<div class="form-row">
<div class="form-group col-md-4">
<label for="product">Product</label>
<select formControlName="pdt" class="form-control" >
<option [value]="pdt.productPriceId" *ngFor="let pdt of productPrice">{{pdt.productName}} - {{pdt.size}}</option>
</select>
</div>
<div class="form-group col-md-1">
<label for="price">Price</label>
<input type="text" class="form-control" formControlName="price" id="price">
</div>
<div class="form-group col-md-1">
<label for="taxPercent">Tax %</label>
<input type="text" class="form-control" formControlName="taxPercent" id="taxPercent">
</div>
<div class="form-group col-md-1">
<label for="quantity">Qty</label>
<input type="text" class="form-control" formControlName="quantity" id="quantity">
</div>
<div class="form-group col-md-1">
<label for="totalAmount">Amt</label>
<input type="text" class="form-control" formControlName="totalAmount" id="totalAmount">
</div>
<div class="form-group col-md-1">
<span>
<button class="btn btn-primary" (click)=addProduct()>Add</button>
</span>
</div>
<div class="form-group col-md-1">
<span>
<button class="btn btn-primary" (click)=removeProduct(i)>Remove</button>
</span>
</div>
</div>
</div>
</div>
Подписка My Value Changes для FormControl выглядит так, как показано ниже. Но я не уверен, как сделать то же самое для FormArray
this.billingForm.get('products[0].pdt').valueChanges.subscribe(
(value) => {
console.log(value);
let taxPercentVal: Number = 0;
let priceVal: Number = 0;
this.productPrice.forEach(function (val) {
if(value == val.productPriceId)
{
taxPercentVal = val.taxPercent;
priceVal = val.price;
}
});
this.billingForm.patchValue({
products: {
taxPercent: taxPercentVal,
price: priceVal,
quantity: '',
totalAmount: ''
}
})
}
);
this.billingForm.get('products.quantity').valueChanges.subscribe((value) => {
console.log(value);
let taxPer = this.billingForm.value.products.taxPercent;
console.log(taxPer);
let pr = this.billingForm.value.products.price;
console.log(pr);
let qty = value;
console.log(qty);
let totAmt = (pr * qty) + ((pr * qty) / taxPer);
console.log(totAmt);
this.billingForm.patchValue({
products: {
totalAmount: totAmt
}
})
})
