Angular's FormControl cause an infinite loop

Question

I have the following logic:

1.component.ts

onChangeRow($event) {
    form.controls["value"].patchValue($event.data.value, { emitEvent: false }); // 
}

2.component.ts

@Output() changeRow: EventEmitter<any> = new EventEmitter<any>();

this.formGroup.valueChanges.subscribe(data => {
  this.changeRow.emit({selfRef: this.selfRef, form: this.formGroup, config: this.config})
})

It looks that patchValue method in the first component triggers a loop, as its new value is catched by valueChanges and the cycle continues until I get a Maximum call stack size exceeded error. Sometimes it only fires 3 times, sometimes just once.

I try to understand why the emitEvent attribute doesn't work here.

See if this fixes the issue: https://stackoverflow.com/a/53460744/6513921 — ruth, Apr 20 '21 at 12:56
I did but it doesn't seem to work. I also tried to use ``distinctUntilChanged`` but this doesn't seem too effective as well, as I patch several form controls in my first component — shAkur, Apr 20 '21 at 13:19

score 2 · Answer 1 · answered Jul 29 '21 at 08:59

2

Try to set onlySelf to true, in patchValue() options argument.

onChangeRow($event) {
    form.controls["value"].patchValue($event.data.value, { onlySelf: true, emitEvent: false }); 
}

answered Jul 29 '21 at 08:59

wonderingdev

1,132
15
28

This worked beautifully! I wish I could have found this on the Angular site first... – iGanja Sep 20 '21 at 23:26
I was caught in an endless loop cause of `control.disable()` Adding `{ onlySelf: true, emitEvent: false}` to the `disable` solved my issue – Petter Pettersson Feb 14 '23 at 14:20

Angular's FormControl cause an infinite loop

1 Answers1