Angular's FormControl cause an infinite loop

user_5958128 0
Viewed 721

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.

form-control angular-reactive-forms angular infinite-loop
1 Answers

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

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