Bacancy Technology

Bacancy Technology represents the connected world, offering innovative and customer-centric information technology experiences, enabling Enterprises, Associates and the Society to Rise™.

12+

Countries where we have happy customers

1050+

Agile enabled employees

World wide offices

12+

Years of Experience

Agile Coaches

Certified Scrum Masters

1000+

Clients projects

1458

Happy customers

Angular

May 17, 2023

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