Dynamically update form values in a FormArray using valueChanges

Question

I know that we can use valueChanges on a FormArray and view the changes as it is being typed. My question is straight forward: how do I perform the array.at(i).patchValue in valueChanges? I would need to know the index of the row where I am keying the value and update FormControls. What I would like to achieve is for e.g. in a calculator, I want to dynamically show the value when I add two numbers without having to click outside of the input field.

ngOnInit() {
  this.form = this.fb.group({
    fdnUnitPrice: [''],
    cap_values: this.fb.array([this.fb.group({
      name: '',
      fdnTotalShare: '', 
      fdnVal: '',
    }
    )])
  })
  this.onValChanges();
}

onValChanges(): void {
  this.capValues.valueChanges.subscribe(val => {
    console.log(val.length)
  })
}

In my code above, what should be the result is in fdnVal, it should show the value when I multiply fdnUnitPrice with fdnTotalShare. The next row will probably have a different value for fdnTotalShare, so fdnVal should be different.

Possible duplicate of How to identify which item in FormArray emitted valueChanges event? — Joy Biswas
– Joy Biswas, Commented Sep 16, 2019 at 8:34
@joyBlanks i did try to use the answer given in that question, but was unable to — mhfour
– mhfour, Commented Sep 16, 2019 at 8:36
are you looking for something like this stackblitz.com/edit/angular6-dynamic-form-array-5by4ud — Joy Biswas
– Joy Biswas, Commented Sep 16, 2019 at 8:51

AVJT82 · Accepted Answer · 2019-09-16 09:21:19Z

I would not use valueChanges for the formarray, but instead a function which is called on input from the user. As the unit price is also editable, we can use the same function on that. So I would suggest the following:

in template:

<input type="number" formControlName="fdnTotalShare" (input)="calculate(cap)"/>

where cap comes from: *ngFor="let cap of capValues.controls;">

and the function:

calculate(cap) {
  cap.get('fdnVal').setValue(
    this.form.get('fdnUnitPrice').value * cap.get('fdnTotalShare').value 
  )
}

Then we would actually listen to valueChanges of the unit price form control, where we then iterate the formarray, and for each formgroup call the calculate function:

onValChanges(): void {
  this.form.get('fdnUnitPrice').valueChanges.subscribe((val) => {
    this.capValues.controls.forEach(cap => {
      this.calculate(cap);
    })
  })
}

DEMO: STACKBLITZ

PS: Remember to unsubscribe to valuChanges when component is destroyed!

Joy Biswas · Accepted Answer · 2019-09-16 09:35:39Z

1

You are assigning to a single formarray when you have multiple i hope you can capture the index at that moment bind it to your value change functions

this.myForm = this.fb.group({
  arr1: this.fb.array([this.fb.group({name: [''],pay: ['']})]),
  arr2: this.fb.array([this.fb.group({name: [''],pay: ['']})])
});

// binding index with array index
Object.keys(this.myForm.controls).forEach((item, index) => {
  this.myForm.controls[item].valueChanges.subscribe(value => {
    this.myForm.controls[item].patchValue([{name:value[0].pay + 'xxx'}], {emitEvent: false, onlySelf: true})
    console.log({index,value})
  });
});

Problem on going in an infinite loop. We have to stop valuechanges from firing if updated via code and not by user, we can do that by passing this {emitEvent: false, onlySelf: true} as a second argument to patchValue which will not trigger valuechanges.

A stackblitz for your reference https://stackblitz.com/edit/angular6-dynamic-form-array-5by4ud

edited Sep 16, 2019 at 9:35

answered Sep 16, 2019 at 8:56

Joy Biswas

6,5371 gold badge26 silver badges50 bronze badges

5 Comments

mhfour Over a year ago

hi i have tried this but got an error Maximum call stack size exceeded. I added in patchValue after the subscribe in valueChanges

Joy Biswas Over a year ago

patch value will again call valuechanges. what are you trying to do ?? Can you you make conditional pathes if already patched you would know so then dont patch anymore

mhfour Over a year ago

i want to dynamically show the value without clicking out of the input box. so as the number changes in fdnTotalShares, fdnVal should change accordingly too

Joy Biswas Over a year ago

ok so you can reset a flag everytime user enters maybe a hidden control and while you patch value look for that control in every row and set it next time if value is set donot patch value that means valuechanges were triggered due to patch, else if value is reset that means user has updated ui

mhfour Over a year ago

can you do a stackblitz based on your suggestion?

Collectives™ on Stack Overflow

Dynamically update form values in a FormArray using valueChanges

2 Answers 2

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related