如何使用表单数组以角度计算子总值？答案

【问题标题】：How to calculate the Sub Total Value in angular using Form Array?如何使用表单数组以角度计算子总值？
【发布时间】：2019-07-08 18:27:39
【问题描述】：

在发票表单中，我有产品名称的下拉菜单，我想根据用户输入的数量和价格计算所选产品名称的小计。

我正在通过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>

显示所有选定产品的小计。

【问题讨论】：

如果有更好的方法我会很感兴趣，但我之前使用 RxJS 做过类似的事情并订阅了 valueChanges codereview.stackexchange.com/questions/222712/…
将addItems 函数更改为addItems() { this.invoiceItems.push(this.ItemsRows()); }，因为itemsRows() 已经返回formGroup。还要避免同时使用ngModel 和formControl。

标签： angular

【解决方案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 }}

附言不要忘记取消订阅form.valueChanges

【讨论】：