Angular 7 Reactive Form Array - Calculate Form values

Question

I have been creating a billing application where I will be capturing item name and price. I want to give discount for the item so I will be having discount in percentage and discount in dollar text boxes. In some cases, either I can enter discount in percentage or discount in dollar values so I want to display both of the them at run time. For example, if I enter discount in dollar then I have to display value in discount in percentage. Can you please help me to solve the requirement?

I have created a sample application using Stackblitz with Angular and reactive forms - https://stackblitz.com/edit/github-hayn68-yjqorz

Ala A. · Accepted Answer · 2019-05-22 14:57:18Z

1

Try this:

<td class="form-group">
      <input #perc type="text" class="form-control" formControlName="discountInPercentage" 
      (change)="percChanged(i, perc.value)">
</td>

TS

percChanged(i, val){
    this.itemForm.value.items[i].discountInDollar = this.itemForm.value.items[i].rate/100*val;
    this.itemForm.controls['items'].setValue(this.itemForm.value.items);
    console.log(this.itemForm.value.items[i].discountInDollar);
}

Change the %Discount value and you should see the output. Stackblitz example

edited May 22, 2019 at 14:57

answered May 22, 2019 at 11:13

Ala A.

2,34526 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nanda Over a year ago

Thank you @ala. Can you please suggest on updating the value in UI. I had formControlName="discountInDollar" in the template but the value in not getting updated after percChanged method set the value this.itemForm.value.items[i].discountInDollar. Updated stackblitz URL - stackblitz.com/edit/github-hayn68-ovpgar

Ala A. Over a year ago

a work around would be to add this this.itemForm.controls['items'].setValue(this.itemForm.value.items); to your percChanged, stackblitz.com/edit/github-hayn68-m6deot

Ala A. Over a year ago

I edited my answer, kindly upvote and mark as solved if that solved your issue.

Collectives™ on Stack Overflow

Angular 7 Reactive Form Array - Calculate Form values

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related