Reactive forms valueChanges method fires twice for one change on input fields

You can follow the below steps to solve this problem.

  • Check if you have subscribed to the observable in multiple places within the same component or not.
  • If you want to take the first value and ignore the subsequent values until there is a change, then you can utilize distinctUntilChanged() rxjs operator. This operator returns unique values only.
linenumbers=”false”>this.MyFrm.controls[‘is_applicable’].valueChanges.pipe(distinctUntilChanged()).subscribe(values => { this.mainFunc() });
  • You can also use throttleTime(500), this will emit the first value and then ignore the next response for 0.5 seconds.
.pipe( distinctUntilChanged(),
takeUntil(this.destroy$) ) .subscribe(values => { this.mainFunc() });



Subscribe for
weekly updates