Why is all valueChanges triggered simultaneously, when only one formControl is interacted with?

Question

I have 2 form fields, which are date pickers, a simple "to" and "from" form.

The problem is that valueChanges in the code below is triggered for both form controls, regardless of which date picker the user interacted with. The "other" form control, which wasn't interacted with is always empty.

So regardless of which date you pick the function addDateFilterToRoute(changes) is triggered twice. I don't understand why.

HTML

<div class="datepicker-container">
  <div class="form-group">

    <form-input-datepicker-dropdown
      [group]="form"
      controlName="deliveryFrom"
    ></form-input-datepicker-dropdown>

  </div>
  <div class="form-group">

    <form-input-datepicker-dropdown
      [group]="form"
      controlName="deliveryTo"
    ></form-input-datepicker-dropdown>

  </div>
</div>

COMPONENT TS

  ngOnInit(): void {
    this.buildForm();
    this.handleFormChanges();
  }


  buildForm(): void {
    this.form = this.fb.group({
      deliveryFrom: '',
      deliveryTo: ''
    });
  }


  handleFormChanges(): void {
    this.form
      .get('deliveryFrom')
      .valueChanges.pipe(takeUntil(this.unsubscribe$))
      .subscribe(changes => this.addDateFilterToRoute(changes, 'deliveryFrom', true));

    this.form
      .get('deliveryTo')
      .valueChanges.pipe(takeUntil(this.unsubscribe$))
      .subscribe(changes => this.addDateFilterToRoute(changes, 'deliveryTo', false));
  }

So when I change deliveryFrom it calls this.addDateFilterToRoute(changes, 'deliveryTo', false)

Answer 1

You've messed up a bit with reactive form creation, by creation of one form group with two controls inside, however you've put those two controls into each data picker as a group on the view. All you need is to move group out of the datepicker. This should not generate extra calls to each control:

<div [formGroup]="form" class="datepicker-container">
  <div class="form-group">
    <form-input-datepicker-dropdown
      [formControlName]="deliveryFrom"
    ></form-input-datepicker-dropdown>
  </div>
  <div class="form-group">
    <form-input-datepicker-dropdown
      [formControlName]="deliveryTo"
    ></form-input-datepicker-dropdown>
  </div>
</div>