使用用户使用Reactive Form和formArray输入的数据更新表

Question

我有一个表，最初填充了来自服务的数据。

查看视觉模型：

现在，我需要使用用户输入的信息来更新字段“总值（数量*单位价值）”，“总总计（总价值之和）”和“总含运费”。

我可以获取用户输入的数据，但不确定如何在相应字段中输入结果。

process.component.ts

ngOnInit() {
    this.form = this.fb.group({
      itemRows: [null]
    });

    this.activatedRoute.params
      .switchMap( (params: Params) => this.quotationService.quotationSupplier(+params['id']) )
      .subscribe(
        response => {
          this.form = this.fb.group({
            itemRows: this.addRows(response)
          });

          this.form.valueChanges.subscribe(val => {
            val.itemRows.map((item, index) => {

            });
          });

        },
        error => alert('Ocorreu um erro no servidor, por favor tente mais tarde.')
      );
  }

  addRows(response) {
    const values = response.map(item => {
      return this.fb.group({
        partNumber:      [item.partNumber, [ Validators.required ]],
        amountQuotation: [item.amountQuotation, [ Validators.required ]],
        amountStock:     [item.amountStock, [ Validators.required ]],
        partCondition:   [item.partCondition, [ Validators.required ]],
        priceUnit:       [item.priceUnit, [ Validators.required ]],
        pricePartial:    this.getPricePartial(item.amountQuotation, item.priceUnit) || this.pricePartial,
        partTotalPrice:  [null, [ Validators.required ]]
      });
    })
    return this.fb.array(values);
  }

  getPricePartial(amount, price) {
    return amount * price;
  }

process.component.html

<form [formGroup]="form">

        <!-- ITEMS TABLE -->
        <div class="quotation-detail-items mt-3">
          <h2><i class="fas fa-file-invoice mr-3"></i> Itens selecionados para cotação</h2>

          <table class="table table-striped">
            <thead class="thead">
              <tr>
                <th>Part Number</th>
                <th>Quantidade/Estoque</th>
                <th>Condição</th>
                <th>Valor Unit.</th>
                <th>Valor Total</th>
              </tr>
            </thead>

            <tbody formArrayName="itemRows">
              <tr [formGroupName]="i" *ngFor="let item of form.get('itemRows').controls; let i = index">

                <td><input class="form-control" formControlName="partNumber" readonly></td>
                <td>
                  <input class="amountQuotation" formControlName="amountQuotation" readonly> /
                  <input class="amountStock" formControlName="amountStock">
                </td>
                <td>
                  <select class="form-control" formControlName="partCondition">
                    <option *ngFor="let item of partConditionOptions" [value]="item.value">{{ item.text }}</option>
                  </select>
                </td>
                <td><input class="form-control" formControlName="priceUnit" (onChange)="getPricePartial(amountQuotation, $event)"></td>
                <td><input class="form-control" formControlName="pricePartial" ></td>

              </tr>
            </tbody>
          </table>

          <!-- TOTAL ITEMS PRICE -->
          <div class="t-footer p-2">
            <div class="row align-items-center">
              <div class="col-md-9 text-right">
                <strong>Total Geral</strong>
              </div>
              <div class="col-md-3">
                <input type="text" class="form-control" value="$ 479.40">
              </div>
            </div>
          </div>

        </div>

        <div class="additional-info mt-4">
          <h2><i class="fas fa-file-invoice mr-3"></i> Informações adicionais</h2>
          <div class="row">
            <div class="col-md-6">
              <textarea class="form-control" rows="3" placeholder="Despesas diversas:"></textarea>
            </div>
            <div class="col-md-6">
              <input type="text" class="form-control" placeholder="Valor de frete:">
              <strong class="mt-3 price-with-shipping">TOTAL GERAL C/ FRETE:</strong>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-md-6">
            <button class="btn btn-success btn-cta btn-block mt-5" routerLink="/admin/quotation-process">Enviar cotação</button>
          </div>
          <div class="col-md-6 text-right">
            <button class="btn btn-secondary mt-5" (click)="goBack()">Voltar</button>
          </div>
        </div>

      </form>

谢谢您的帮助。