Angular - Error RangeError: Maximum call stack size exceeded. after removing distinctUntilChanged() from a fromControl value change subscription

Question

I have two angular components a parent and a child, both with their own form fields. I setup change listeners in both components to listen to the form control value changes and disable some fields upon typing in some form controls.

When attempting to disable a form control inside component-2 from the change listener in component-1, the form control is not disabled right away instead it disables after typing the second character.

After some research I discovered that using the distinctUntilChanged() in my change listener subscription was the cause. removing the distinctUntilChanged() from the subscription resolved the primary issue, however, now it is causing the following console error: ERORR: RangeError: Maximum call stack size exceeded.

changeListener(){
        this.myForm.get('sample_control_name').valueChanges.subscribe(v => { 
            if(isNotEmpty(v)) {
                this.childComponent.getFormGroup().get('sample_control_name_1').disable();
            } 
            else {
                this.childComponent.getFormGroup().get('sample_control_name_1').enable();
            }
        })
}

Answer 1

It seems you've essentially created a loop. The valueChanges observable will emit when you call enable or disable. Here is the relevant section from the Angular Docs:

You can try adding {emitEvent: false} to your disable call and that should fix it.