Угловые 6 значений патча массива формы при изменении значения - PullRequest
Новая
       31

Угловые 6 значений патча массива формы при изменении значения

0 голосов
/ 16 октября 2018

Ниже мой FormArray, я хотел бы обновить один вход на основе изменений значения на другом входе.Всякий раз, когда пользователь меняет продукт, сервис получит цену и taxPercent, которые необходимо пропатчить для этого индекса в массиве форм, а когда добавится количество, я бы хотел проплатить totalAmount.Это было легко, когда это просто formControlElements, подписавшись на соответствующие valueChanges и указав соответствующие поля.Как я могу сделать то же самое в FormArray?

<div formArrayName="products" *ngFor="let product of productsArray.controls; let i=index">
      <div [formGroupName]="i">
          <div class="form-row">

              <div class="form-group col-md-4">
                  <label for="product">Product</label>
                  <select formControlName="pdt"  class="form-control" >
                      <option [value]="pdt.productPriceId" *ngFor="let pdt of productPrice">{{pdt.productName}}  -  {{pdt.size}}</option>
                  </select>
              </div>

              <div class="form-group col-md-1">
                <label for="price">Price</label>
                <input type="text" class="form-control" formControlName="price" id="price">
              </div>
              <div class="form-group col-md-1">
                <label for="taxPercent">Tax %</label>
                <input type="text" class="form-control" formControlName="taxPercent" id="taxPercent">
              </div>

              <div class="form-group col-md-1">
                <label for="quantity">Qty</label>
                <input type="text" class="form-control" formControlName="quantity" id="quantity">
              </div>

              <div class="form-group col-md-1">
                <label for="totalAmount">Amt</label>
                <input type="text" class="form-control" formControlName="totalAmount" id="totalAmount">
              </div>

            <div class="form-group col-md-1">
                <span>
                  <button class="btn btn-primary" (click)=addProduct()>Add</button>
                </span>
            </div>
            <div class="form-group col-md-1">
              <span>
                <button class="btn btn-primary" (click)=removeProduct(i)>Remove</button>
              </span>
          </div>
        </div>
      </div>
    </div>

Моя подписка на изменения значения для FormControl выглядит следующим образом.Но я не уверен, как сделать то же самое для FormArray 

this.billingForm.get('products[0].pdt').valueChanges.subscribe(
      (value) => {

          console.log(value);
          let taxPercentVal: Number = 0;
          let priceVal: Number = 0;
          this.productPrice.forEach(function (val) {
            if(value == val.productPriceId)
            {
              taxPercentVal = val.taxPercent;
              priceVal = val.price;
            }
          });

          this.billingForm.patchValue({
            products: {
              taxPercent: taxPercentVal,
              price: priceVal,
              quantity: '',
              totalAmount: '' 
            }
          })



      }
    );



    this.billingForm.get('products.quantity').valueChanges.subscribe((value) => {
          console.log(value);
          let taxPer = this.billingForm.value.products.taxPercent;
          console.log(taxPer);
          let pr = this.billingForm.value.products.price;
          console.log(pr);
          let qty = value;
          console.log(qty);
          let totAmt = (pr * qty) + ((pr * qty) / taxPer);
          console.log(totAmt);
          this.billingForm.patchValue({
            products: {
              totalAmount: totAmt
            }
          })
    })

1 Ответ

0 голосов
/ 16 октября 2018

Вы можете добавить функцию в событие изменения.Примерно так: 

<div class="form-group col-md-4">
                  <label for="product">Product</label>
                  <select formControlName="pdt"  class="form-control" **(change)="onChange($event)"** >
                      <option [value]="pdt.productPriceId" *ngFor="let pdt of productPrice">{{pdt.productName}}  -  {{pdt.size}}</option>
                  </select>
</div>

Вы сможете захватить новый продукт и обновить свои поля, используя привязку данных.Надеюсь, это поможет!

...