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.

this.MyFrm.controls[‘is_applicable’].valueChanges
.pipe( distinctUntilChanged(),
throttleTime(500),
takeUntil(this.destroy$) ) .subscribe(values => { this.mainFunc() });