Angular Reactive Form, valueChanges runs into "maximum call stack size"

Question

I am trying to change my formarray values based on the index as soon as a change in the form occurs. The following situation is given: I have given phases each with a start and end date. Except for the first phase, the start date of a phase should always be the same as the end date of the previous phase.

I think the error occurs because the valueChanges always calls itself as the value of the form is changed at the end of the method.

  onChanges() {
this.projectForm.controls['phases'].valueChanges.subscribe(value => {
  for (var i = 1; i <= this.phasecount; i++) {
      this.projectPhases.at(i).patchValue({ pStart: value[i - 1].pEnd });                   
  }
})

}

do any of you have an idea how to work around the error (maybe a termination condition)?

Thanks in advance.

You can try to add {emitEvent: false, onlySelf:true} as options for the patchValue — MikeOne
– MikeOne, Commented Dec 18, 2020 at 11:00

ibenjelloun · Accepted Answer · 2020-12-18 11:02:02Z

3

This line this.projectPhases.at(i).patchValue({ pStart: value[i - 1].pEnd }); triggers this event this.projectForm.controls['phases'].valueChanges and it infinite loops.

You could set emitEvent option to false while doing patchValue :

this.projectPhases.at(i)
.patchValue({ pStart: value[i - 1].pEnd }, { emitEvent: false });

answered Dec 18, 2020 at 11:02

ibenjelloun

7,7732 gold badges33 silver badges55 bronze badges

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

3 Comments

manti13 Over a year ago

thanks alot, no maximum call stack size anymore :). But im now getting the following error: TypeError: Cannot read property 'patchValue' of undefined.

ibenjelloun Over a year ago

This is probably because somehow you get into a state where this.projectPhases.at(i) is undefined, you should probably debug this line of code until you get into this case.

manti13 Over a year ago

nevermind, i had to put < into the for-loop not <=

Collectives™ on Stack Overflow

Angular Reactive Form, valueChanges runs into "maximum call stack size"

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related