Как рассчитать значение Sub Total Value в угловых единицах с помощью массива форм?

Question

В форме счета-фактуры У меня выпадающий список с названиями продуктов. Я хочу рассчитать промежуточную сумму для выбранного имени продукта в зависимости от количества и цены, введенных пользователем.

Я реализую через формы управления значения формы FormArray, как отобразить в шаблоне?

Я пытался, но не смог получить желаемый результат.

ngOnInit() {
    this.j = 0;
    this.invoiceForm = this.fb.group({
        invoiceItems: this.fb.array([this.ItemsRows()])
    });

}

ItemsRows() {
    return this.fb.group({
        invoiceSelect: new FormControl(''),
        qty: new FormControl(''),
        price: new FormControl('')

    })
}

get invoiceItems() {
    return this.invoiceForm.controls.invoiceItems as FormArray;
}

addItems() {
    this.invoiceItems.push(this.fb.group(this.ItemsRows()))
}

onChange(event) {
    this.j = event;
}

<form [formGroup]="invoiceForm">
  <div formArrayName="invoiceItems" class="uk-grid-small" uk-grid>
    <ng-container *ngFor="let item of invoiceForm.get('invoiceItems').controls; let i=index"
    [formGroupName]="i">
    <table class="uk-table uk-table-justify uk-table-divider">
      <thead>
        <tr>
          <th class="uk-width-small">Product Name</th>
          <th>Quantity</th>
          <th>Price</th>
          <th>Total</th>
          <th><button class="uk-button-danger" (click)="addItems()">+</button></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <div class="uk-width-1-2@m">
              <select (change)="onChange($event.target.value)" name="invoiceSelect"
                formControlName="invoiceSelect" class="uk-select uk-margin-top ">
              <option *ngFor="let productDetail of product; let productIndex=index"
              [value]="productIndex">
              {{ productDetail.productName }} </option>
              </select>
            </div>
          </td>
          <td>
            <div class="uk-width-1-2@m">
              <input class="uk-input uk-margin-top uk-margin-right" type="number" name="quantity"
                formControlName="qty" min="1" max="10" />
            </div>
          </td>
          <td>
            <div>
              <input class="uk-input uk-margin-right uk-margin-top" id="price" name="price"
              formControlName="price" type="number"
              [(ngModel)]="product.length === 0 ? tempPrice: product[j]['price']" />
            </div>
          </td>
          <td>
            <div>
              <p>
                {{ item.value.qty * item.value.price | currency }}
              </p>
            </div>
          </td>
        </tr>
        <tr>
          <td><input name="item.discount" size="10" value="0"></td>
          <td>Discount: {{(1-item.discount/100) * (item.value.qty * item.value.price)|currency}}</td>
        </tr>
      </tbody>
    </table>
    </ng-container>
  </div>
</form>

Для отображения общей суммы всех выбранных продуктов.

Answer 1

Я хотел бы сделать это

определить переменную с именем subTotal

subTotal: number;

в ngOnInit после формы установки

this.invoiceForm.valueChanges().subscribe(value => {
   this.subTotal = value.invoiceItems.reduce((sum, item) => sum += (item.qty || 0) * (item.price || 0) ,0)
})

и в вашем html

{{ subTotal | currency }}

ps Не забудьте отписаться от form.valueChanges