Fix Reading Value From Another Row in Reactive Forms In Angular

Question

How can i fix this change that is returned? Change is Amount To Pay - Total Amount. The problem is that it doesn't change after i rate and quantity. It only change the value after i change something in the Amount To Pay input? Here's the plunker that I've made.

PLUNKER CODES HERE

onChanges(): void {
  this.invoiceForm.get('amount').valueChanges.subscribe(val => {
    return this.change = this.invoiceForm.get('amount').value - this.invoiceForm.get('summed').value
  });
}

vince · Accepted Answer · 2018-01-23 14:48:56Z

1

What you're currently doing is sort of mixing template driven forms and reactive forms, by trying to attach an [ngModel] input to your form control. What you want to do is set the value of that form control using the reactive forms API, specifically the .setValue() method. This allows you to update the value of your form control from the component class.

I've forked your plunkr and updated it with the working code: http://plnkr.co/edit/WqkJpzgdGakHjM2Mnk59?p=preview

I'll provide the important stuff here for reference:

this.invoiceForm.get('itemRows').valueChanges.subscribe(values => {
    this.invoiceForm.get('summed')
      .setValue(values.reduce((acc, cur) => acc + cur.itemamt, 0));
});

this.invoiceForm.get('summed').valueChanges.subscribe(value => {
  this.setChange();
});

this.invoiceForm.get('amount').valueChanges.subscribe(() => {
  this.setChange();
});

Then define a setChange method as:

setChange(): void {
  const change = this.invoiceForm.get('amount').value - 
                 this.invoiceForm.get('summed').value;
  this.invoiceForm.get('change').setValue(change);
}

Learn more about reactive forms here: https://angular.io/guide/reactive-forms.

edited Jan 23, 2018 at 14:48

answered Jan 23, 2018 at 13:53

vince

8,3463 gold badges39 silver badges45 bronze badges

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

4 Comments

Joseph Over a year ago

I think you should also use valueChanges in the itemRows since if you change something in the rate or quantity, it will affect the total. Can you edit your code? Thanks

Joseph Over a year ago

Did you get what i mean?

Joseph Over a year ago

By the way what happens when you mix template driven and reactive forms?

vince Over a year ago

You're welcome :) I know there are pros and cons to either/or and mixing them in the same form isn't good practice. May make for a separate question. Lots of resources talking about differences (here's a good link: stackoverflow.com/questions/39142616/…) but not too many talking about mixing the two. I guess the main thing would be that reactive is syncronous while template-driven is asynchronous in nature. Mixing async + sync = Zalgo. Avoid zalgo at all costs

Collectives™ on Stack Overflow

Fix Reading Value From Another Row in Reactive Forms In Angular

1 Answer 1

4 Comments

Your Answer

Linked

Collectives™ on Stack Overflow

Fix Reading Value From Another Row in Reactive Forms In Angular

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related