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 }}

p.s 别忘了退订form.valueChanges

如何使用Form Array计算角度下的Sub Total Value？

1 个答案: