'Why doesn't my Angular combineLatest operate the first time you make a change on a page?

I have the following combineLatest:

  validateAttendanceDateAndDuplicates$ = combineLatest([this.controls.attendanceDate.valueChanges, this.controls.type.valueChanges, this.$spService.clientAttendance$, this.$spService.clientProfile$]).pipe(
    tap(([attendanceDate, type, attendances, client]) => {

      console.log("in valid type top")

    const typeValueChanges$ =
      this.controls.type.valueChanges.pipe(
        mergeMap(() => {

          console.log("in valid type")

          return this.$spService.clientAttendance$;
        }),
        tap((attendances) => {
          this.validateTypeAndDate(client, attendances);
        }
      ))

      console.log("in valid attend top")

    const attendanceDateValueChanges$ =
      this.controls.attendanceDate.valueChanges.pipe(
        mergeMap(() => {

          console.log("in valid attend")

          return this.$spService.clientProfile$;
        }),
        tap(client => {
          this.validateTypeAndDate(client, attendances);
        }
      ))
      merge(typeValueChanges$, attendanceDateValueChanges$).subscribe();
    }))

The top pipe operation is for a type dropdown and the second is for a date picker. Here is the pattern: the first time you open a new tab in Chrome, when you pick a type, based on the console.log statements, I can see that neither the tap nor the mergeMap is entered. When you then pick a date, I can see that tap is entered, but not the mergeMap. After that, if you pick either a type or date, all works as expected. Also, the pattern is the same if you first pick a date in a new tab.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source