RangeError: Maximum call stack size exceeded when using valueChanges.subscribe

Question

I am using Angular 5 with Reactive forms and need to make use of the valueChanges in order to disable required validation dynamically

component class:

export class UserEditor implements OnInit {

    public userForm: FormGroup;
    userName: FormControl;
    firstName: FormControl;
    lastName: FormControl;
    email: FormControl;
    loginTypeId: FormControl;
    password: FormControl;
    confirmPassword: FormControl;
...

ngOnInit() {
    this.createFormControls();
    this.createForm();
    this.userForm.get('loginTypeId').valueChanges.subscribe(

            (loginTypeId: string) => {
                console.log("log this!");
                if (loginTypeId === "1") {
                    console.log("disable validators");
                    Validators.pattern('^[0-9]{5}(?:-[0-9]{4})?$')]);
                    this.userForm.get('password').setValidators([]);
                    this.userForm.get('confirmPassword').setValidators([]);

                } else if (loginTypeId === '2') {
                    console.log("enable validators");
                    this.userForm.get('password').setValidators([Validators.required, Validators.minLength(8)]);
                    this.userForm.get('confirmPassword').setValidators([Validators.required, Validators.minLength(8)]);

                }

                this.userForm.get('loginTypeId').updateValueAndValidity();

            }

        )
}
createFormControls() {
    this.userName = new FormControl('', [
        Validators.required,
        Validators.minLength(4)
    ]);
    this.firstName = new FormControl('', Validators.required);
    this.lastName = new FormControl('', Validators.required);
    this.email = new FormControl('', [
      Validators.required,
      Validators.pattern("[^ @]*@[^ @]*")
    ]);
    this.password = new FormControl('', [
       Validators.required,
       Validators.minLength(8)
    ]);
    this.confirmPassword = new FormControl('', [
        Validators.required,
        Validators.minLength(8)
    ]);

}

createForm() {
 this.userForm = new FormGroup({
      userName: this.userName,
      name: new FormGroup({
        firstName: this.firstName,
        lastName: this.lastName,
      }),
      email: this.email,
      loginTypeId: this.loginTypeId,
      password: this.password,
      confirmPassword: this.confirmPassword
    });
}

However when I run it I get a browser javascript error

UserEditor.html:82 ERROR RangeError: Maximum call stack size exceeded
    at SafeSubscriber.tryCatcher (tryCatch.js:9)
    at SafeSubscriber.webpackJsonp.../../../../rxjs/_esm5/Subscription.js.Subscription.unsubscribe (Subscription.js:68)
    at SafeSubscriber.webpackJsonp.../../../../rxjs/_esm5/Subscriber.js.Subscriber.unsubscribe (Subscriber.js:124)
    at SafeSubscriber.webpackJsonp.../../../../rxjs/_esm5/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:242)
    at SafeSubscriber.webpackJsonp.../../../../rxjs/_esm5/Subscriber.js.SafeSubscriber.next (Subscriber.js:186)
    at Subscriber.webpackJsonp.../../../../rxjs/_esm5/Subscriber.js.Subscriber._next (Subscriber.js:127)
    at Subscriber.webpackJsonp.../../../../rxjs/_esm5/Subscriber.js.Subscriber.next (Subscriber.js:91)
    at EventEmitter.webpackJsonp.../../../../rxjs/_esm5/Subject.js.Subject.next (Subject.js:56)
    at EventEmitter.webpackJsonp.../../../core/esm5/core.js.EventEmitter.emit (core.js:4319)
    at FormControl.webpackJsonp.../../../forms/esm5/forms.js.AbstractControl.updateValueAndValidity (forms.js:3377)

"log this!" is loggedcalled repeatedly like it is called recursively which is why their is a stack error

If I remove the valueChanges.subscribe the code work apart from removing the validation conditionally.

Why is it calling valueChanges.subscribe recursively?

Isn't it because you call `updateValueAndValidity()` at the end of the event handler? — ConnorsFan, Dec 14 '17 at 20:52
I agree with ConnorsFan, `updateValueAndValidity()` is probably causing valueChanges to fire again, causing an infinite loop — LLai, Dec 14 '17 at 21:25
@ConnorsFan thats the reason for the recursion. I shouldn't update the same field I am monitoring for change. Code was meant to be 'this.userForm.get('loginTypeId').'. You can put it in an answer — dfmetro, Dec 14 '17 at 21:43

score 67 · Answer 1 · edited Dec 27 '19 at 02:32

If you want to subscribe to any form changes and still run patchValue inside it, then you could add the {emitEvent: false} option to patchValue, thus the patching will not trigger another change detection

code:

this.formGroup
    .valueChanges
    .subscribe( _ => {
        this.formGroup.get( 'controlName' ).patchValue( _val, {emitEvent: false} );
    } );

PS. This is also less tedious than subscribing to each form control one-by-one to avoid triggering change max call stack exceeded. Especially if you form has 100 controls to subscribe to.

Now to elaborate further, if you still need to updateValueAndValidity inside the subscription, then I suggest you use the distinctUntilChanged rxjs operator, to only run the subscription, when some value changes.

distinctUntilChanged documentation can be found here

https://www.learnrxjs.io/operators/filtering/distinctuntilchanged.html

distinctUntilChanged - Only emit when the current value is different than the last.

Now we will also have to make it a custom validation function, because by default, distinctUntilChanged validates objects by pointer and the pointer is new on every change.

this.formGroup
    .valueChanges
    .distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b))
    .subscribe( _ => {
        this.formGroup.get( 'controlName' ).patchValue( _val, {emitEvent: false} );
        this.formGroup.get( 'controlName' ).updateValueAndValidity();
    } );

And voila, we are patching and updating, without running into the maximum call stack!

The solution I was looking for. Bettern than having a boolean 'valueChangesRunning'. +1 — C4d, Jan 16 '20 at 10:32

score 45 · Answer 2 · edited Jan 19 '22 at 16:24

45

My answer is just development of this one.

By adding distinctUntilChanged() in the pipeline just before subscribe() you avoid the "Maximum call stack size exceeded" because

distinctUntilChanged method only emit when the current value is different than the last.

The usage:

this.userForm.get('password')
  .valueChanges.pipe(distinctUntilChanged())         
  .subscribe(val => {})

Documentation

edited Jan 19 '22 at 16:24

KBell

502
8
23

answered Nov 27 '18 at 07:56

mpro

14,302
5
28
43

What about if I am using forEach for the formgroup? https://stackoverflow.com/questions/63303903/rangeerror-maximum-call-stack-size-exceeded-at-abstractcontrol-updatevalueandva – Bravo Aug 07 '20 at 14:39
I tried to subscribe to valueChanges of form. At the task needs been to check one checkbox and disable other and vice versa. I get maximum callstack exceeded.```distinctUntilChanged ``` save my time! thanks a lot! – forest smoker Mar 03 '23 at 09:24

ConnorsFan · Accepted Answer · 2017-12-14T21:58:57.877

28

The problem is that you modify the value of the field inside of the valueChanges event handler for that same field, causing the event to be triggered again:

this.userForm.get('loginTypeId').valueChanges.subscribe(
  (loginTypeId: string) => {
    ...
    this.userForm.get('loginTypeId').updateValueAndValidity(); <-- Triggers valueChanges!
}

edited Dec 14 '17 at 21:58

answered Dec 14 '17 at 21:52

ConnorsFan

70,558
13
122
146

Yes thanks I had to change to `this.userForm.get('password').updateValueAndValidity();this.userForm.get('confirmPassword').updateValueAndValidity();` – dfmetro Dec 15 '17 at 04:35
What about if I am using forEach for the formgroup? https://stackoverflow.com/questions/63303903/rangeerror-maximum-call-stack-size-exceeded-at-abstractcontrol-updatevalueandva – Bravo Aug 07 '20 at 14:40

score 23 · Answer 4 · answered Dec 14 '17 at 20:56

23

Try adding distinctUntilChanged() in the pipeline just before subscribe(). It should filter out those "change" events where value was not actually changed.

answered Dec 14 '17 at 20:56

Alexander Leonov

4,694
1
17
25

1

This is universal solution, which works also in the case when you perform `valueChanges` on multiple and dependent on each others `formControls`. Thanks! – mpro Nov 26 '18 at 11:26
Somehow doesn't help me :( – Frankie Drake Jun 05 '19 at 13:23
1

It just means that your code is different in some way. Post your own question and someone will answer it. – Alexander Leonov Jun 05 '19 at 13:42

score 4 · Answer 5 · answered Nov 30 '22 at 09:54

In my case, it was when I was trying to update the value and validity of a Form Control, it is indeed fixed by the { emitEvent: false } addition:

    // making sure that at least one name is filled in
    this.form.get('firstName').valueChanges.subscribe((value) => {
      if (value) {
        this.form.get('lastName').setValidators(Validators.nullValidator);
      } else {
        this.form.get('lastName').setValidators(Validators.required);
      }
      this.form.get('lastName').updateValueAndValidity({ emitEvent: false }); // <- here
    });

1

This worked for me. – Saransh Dhyani Aug 03 '23 at 07:47

score 2 · Answer 6 · answered Sep 12 '21 at 15:34

2

I faced similar error when doing validation. Error raised when call updateValueAndValidity().in my case I used this overload updateValueAndValidity({emitEvent : false})

try with this

this.userForm.get('loginTypeId').updateValueAndValidity({emitEvent : false});

answered Sep 12 '21 at 15:34

Priyankara

31
1

Thank you so much. You saved hours of debugging. – Pranav HS Nov 18 '22 at 10:06

score 0 · Answer 7 · answered Feb 18 '22 at 08:25

0

this.userForm.get('loginTypeId').enable({emitEvent: false});

if you need to enable one select of all selects your form

answered Feb 18 '22 at 08:25

forest smoker

119
1
3

score 0 · Answer 8 · answered Jul 19 '22 at 15:42

0

Maybe this link will resolver this and other cases

https://github.com/angular/angular/issues/11205

answered Jul 19 '22 at 15:42

elciospy

260
4
11

RangeError: Maximum call stack size exceeded when using valueChanges.subscribe

8 Answers8

Linked