1

I have two forms on my page, and I want both of them to be valid before showing the save button. I was looking for something along the lines of:

combineSoonest([
  this.nameForm.statusChanges,
  this.addressForm.statusChanges,
]).pipe(
  map(([nameStatus, addressStatus: [string, string]) => {
    const nameIsValid = nameStatus === undefined || nameStatus === 'VALID';
    const addressIsValid = addressStatus === undefined || addressStatus === 'VALID';

    return nameIsValid && addressIsValid;
  }),
).subscribe((isValid) => { this._showSaveButton(isValid); });

If I use the combineLatest operator, nothing will be emitted until both forms have been touched. Is there a combineLatest-like operator or option that allows me to emit even if one of the two combined observables has not emitted yet?

timdeschryver
  • 14,415
  • 1
  • 19
  • 32
cadesalaberry
  • 612
  • 1
  • 8
  • 17
  • 3
    Does `RxJS.startWith()` help in changing this `nothing will be emitted until both forms have been touched`? https://www.learnrxjs.io/learn-rxjs/operators/combination/startwith – fujy Aug 07 '23 at 20:52

1 Answers1

1

Use startWith and skip to set this up.

const name = this.nameForm.statusChanges.pipe(
  startWith(undefined)
)
const addressForm = his.addressForm.statusChanges.pipe(
  startWith(undefined)
)

combineLatest([name, addressForm]).pipe(
  // skip the first value which will be (undefined, undefined)
  skip(1),
  // from here, at least 1 value will be populated
  map(...),
).subscribe(...)
Brandon
  • 38,310
  • 8
  • 82
  • 87
  • Thanks @fujy and @Brandon, that is what I was looking for. I did not use the the `skip` because I needed the function to be executed with `false` initially. – cadesalaberry Aug 21 '23 at 14:56