Angular : ERROR RangeError: Maximum call stack size exceeded message when I type in inputs

Question

I'm getting ERROR RangeError: Maximum call stack size exceeded message in console when I type something in one of this inputs

app.component.html

<div class="container-wrap">
    <div class="container">
        <input type="number" [formControl]="input1">
        <input type="number" [formControl]="input2">
    </div>
</div>

app.component.ts

constructor() { }

  input1:FormControl=new FormControl();
  input2:FormControl=new FormControl();

  ngOnInit(): void {

    this.input1.valueChanges
    .pipe(tap(value=>{
      this.input2.setValue(value);
    })).subscribe();

    this.input2.valueChanges
    .pipe(tap(value=>{
      this.input1.setValue(value);
    })).subscribe();

  }

Looks like typing in one of my inputs calls endless valueChanges loop in app.

I want to make when I type in iput1 something it types in input2 and also when I type in input2 it will change input in input1.

how to fix this?

you might need to set the "other" input value conditionnaly, only if other input value is different from the one you want to set. And you need to add this condition in both your valueChanges subscriptions — Sergio Mazzoleni
– Sergio Mazzoleni, Commented Sep 21, 2021 at 13:47
you're setting a value (which will also trigger value changes) every time there's a value change. So you're creating an infinite loop. What's the purpose of this? — eko
– eko, Commented Sep 21, 2021 at 13:49
@eko I want to make currency convertor app where changing both input value will change other inputs value — Tobias Foxtrot
– Tobias Foxtrot, Commented Sep 21, 2021 at 13:53

Sam · Accepted Answer · 2021-09-21 13:57:49Z

2

You can pass an extra argument to setValue which should stop your valueChanges being run on the value you are editing.

this.input1.valueChanges
    .pipe(tap(value=>{
      this.input2.setValue(value, { emitEvent: false });
    })).subscribe();
    

this.input2.valueChanges
    .pipe(tap(value=>{
      this.input1.setValue(value, { emitEvent: false });
    })).subscribe();

answered Sep 21, 2021 at 13:57

Sam

1,87111 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pilpo · Accepted Answer · 2021-09-21 13:57:44Z

1

You can use a FormGroup containing your two FormControl.

With a FormBuilder it'll look like this:

constructor(formBuilder: FormBuilder) {}

ngOnInit(): void {
  this.formGroup = this.formBuilder.group({
              inputA: this.input1,
              inputB: this.input2
  });
  this.formGroup.valueChanges.subscribe(values => [switch values here]);
}

edited Sep 21, 2021 at 13:57

answered Sep 21, 2021 at 13:52

Pilpo

1,2961 gold badge9 silver badges19 bronze badges

Comments

Munzer · Accepted Answer · 2021-09-21 13:58:45Z

1

The error is happening because of the infinity loop caused by your value changes subscription, once one input change, it trigger the second input value to change, then the second value change listener will trigger the first and the loop continue, you can fix this by adding emitEvent: false to your form control set value

  this.input2.setValue(value, {emitEvent: false});

answered Sep 21, 2021 at 13:58

Munzer

2,3282 gold badges21 silver badges27 bronze badges

Collectives™ on Stack Overflow

Angular : ERROR RangeError: Maximum call stack size exceeded message when I type in inputs

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related