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? — Martin Parenteau
– Martin Parenteau, Commented Dec 14, 2017 at 20:52
I agree with ConnorsFan, updateValueAndValidity() is probably causing valueChanges to fire again, causing an infinite loop — LLai
– LLai, Commented Dec 14, 2017 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
– dfmetro, Commented Dec 14, 2017 at 21:43

David Barratt · Accepted Answer · 2019-12-27 02:32:30Z

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

KBell · Accepted Answer · 2022-01-19 16:24:35Z

51

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, 2022 at 16:24

KBell

5111 gold badge8 silver badges24 bronze badges

answered Nov 27, 2018 at 7:56

mpro

15.1k5 gold badges33 silver badges44 bronze badges

3 Comments

Bravo Over a year ago

What about if I am using forEach for the formgroup? stackoverflow.com/questions/63303903/…

forest smoker Over a year ago

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!

AsGoodAsItGets Sep 24 at 15:06

You may also need to provide a deep object equality method like isEqual from lodash to distinctUntilChanged if you're listening to the complete form value changes.

Martin Parenteau · Accepted Answer · 2017-12-14 21:58:57Z

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, 2017 at 21:58

answered Dec 14, 2017 at 21:52

Martin Parenteau

74k13 gold badges135 silver badges157 bronze badges

2 Comments

dfmetro Over a year ago

Yes thanks I had to change to this.userForm.get('password').updateValueAndValidity();this.userForm.get('confirmPassword').updateValueAndValidity();

Bravo Over a year ago

What about if I am using forEach for the formgroup? stackoverflow.com/questions/63303903/…

Alexander Leonov · Accepted Answer · 2017-12-14 20:56:36Z

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, 2017 at 20:56

Alexander Leonov

4,8242 gold badges19 silver badges25 bronze badges

3 Comments

mpro Over a year ago

This is universal solution, which works also in the case when you perform valueChanges on multiple and dependent on each others formControls. Thanks!

Frankie Drake Over a year ago

Somehow doesn't help me :(

Alexander Leonov Over a year ago

It just means that your code is different in some way. Post your own question and someone will answer it.

Bullsized · Accepted Answer · 2022-11-30 09:54:32Z

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
    });

Priyankara · Accepted Answer · 2021-09-12 15:34:56Z

3

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, 2021 at 15:34

Priyankara

411 bronze badge

Comments

forest smoker · Accepted Answer · 2022-02-18 08:25:49Z

0

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

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

answered Feb 18, 2022 at 8:25

forest smoker

1391 silver badge3 bronze badges

Collectives™ on Stack Overflow

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

7 Answers 7

1 Comment

3 Comments

2 Comments

3 Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

3 Comments

2 Comments

3 Comments

Comments

Comments

Comments

Linked

Related