Как рассчитать общую стоимость в angular formarray и formcontrol

Question

this.angForm=this.fb.group({
    status:[''],
    subtotal:[],
    tax:[],
    total:[],
    date:[],
    orderProducts:this.fb.array([]),
    paymentMethod:[''],
    customerFullName:[''],
    phone:[''],
    email:[''],
    shippingAddress:[''],
    deliveryNote:[''],
    city:[''],
    province:[''],
    postalCode:[''],
  })
}

это структура формы, а orderProducts - это formarray

for(let i of this.items){
      this.ProductOrder.push(new FormGroup({
      productName:new FormControl(i.name),
      isDonation:new FormControl(false),
      isGift:new FormControl(false),
      comment:new FormControl(null),
      price:new FormControl(i.price),
      quantity:new FormControl(0),
      }),)
    }

в formarray, у меня есть часть formcontrol, показывающая название продукта и цену, а в другом поле имя и цена, которые я взял это из базы данных. Теперь я попытался рассчитать количество * всех продуктов

    <form [formGroup]="angForm">
<div formArrayName="orderProducts">
<div class="cart-item" *ngFor="let item of ProductOrder.controls;let i = index">
<br>
<div [formGroupName]="i">
    <mat-card class="card">
    <b>Item:</b>  
    {{ item.controls.productName.value }}<br>
    <b>Price:</b>   
    {{ item.controls.price.value}} &#160;&#160;&#160;&#160;
    <mat-form-field>
        <mat-label>Qty:</mat-label>
        <input matInput type="number" min="0" formControlName="quantity">
      </mat-form-field>
    <br>
    <mat-checkbox formControlName="isGift" >This is a gift</mat-checkbox> &#160;&#160;
    <mat-checkbox formControlName="isDonation">Donate it </mat-checkbox><br>
    <mat-form-field class="comment"> 
    <mat-label>Leave a comment</mat-label>
    <textarea matInput placeholder="I want ..." formControlName="comment" ></textarea>
    </mat-form-field><br>

. В этом случае общая цена должна составлять 160. Как рассчитать цену и динамически отобразить ее на той же странице это HTML часть. Большое спасибо

https://github.com/febycloud/BakeryStore/tree/master/frontend/src/app/cart Вот мой полный код Спасибо за помощь

Answer 1

Я не проверял это, но если я правильно понимаю, это то, что вы хотите

var orderProducts = this.angForm.get('orderProducts') as FormArray;
var forms = orderProducts.controls as FormGroup[];
var qtyFormControls = forms.map(x => x.get('quantity'));

qtyFormControls.forEach(qfc => {
  var parent = qfc.parent; //FormGroup
  qfc.valueChanges.subscribe(qty => {
     var itemTotal = qty * parent.get('price');
     parent.get('itemTotal').setValue(itemTotal );
     console.log("Item total: ", itemTotal ))
     calculateCartTotal();
});

не поддавайтесь отмене подписки в ловушке жизненного цикла ngOnDestroy (), чтобы предотвратить утечки памяти

ОБНОВЛЕНИЕ:

Чтобы получить промежуточный итог различных элементов, мы можем добавить еще один FormControl под названием subTotal к элементам управления FormGroup в рамках OrderProducts FormArray и заполнить его итоговым значением для этого продукта, а затем пересчитать итоговый заказ:

var total = 0;
var calculateCartTotal = () => {
  total = forms.map(x => +x.get('itemTotal').value)
               .reduce((acc, val) => acc + val);
}