0
votes

I have two input fields, Street address and Zipcode, which each of them emit it's value on keyup as Subject (Angular's event emitter).

I want to have both of the emitter values valid before calling an API end point using them.

First observable, Street address:

this.searchableComponent.value
            .do((value: any) => {
                if (value.length < this.MINIMAL_LENGTH_FOR_SEARCH) {
                    this.suggestions = [];
                }
            })
            .filter(() => this._zipcodeModel !== undefined && this._zipcodeModel.city.length > 0)
            .filter((value: any) => value.length >= this.MINIMAL_LENGTH_FOR_SEARCH)
            .debounceTime(this.DEBOUNCE_TIME_IN_MS)
            .distinctUntilChanged()
            .do(() => console.log('ready street address'))

Second observable Zipcode:

this.zipcodeInput.value
        .filter((value: string) => {
            const pattern = new RegExp(US_ZIPCODE);

            return pattern.test(value);
        })
        .distinctUntilChanged()
        .mergeMap((zipcode: string) => this.addressService.lookup(zipcode))
        .map((zipcodeModel: ZipcodeModel) => this._zipcodeModel = zipcodeModel)
        .do(() => console.log('ready zipcode'))

The simple forkJoin to test (same implementation as combineLatest attempt):

forkJoin(this.searchableComponent.value, this.zipcodeInput.value)
            .subscribe((results: any) => {
                console.log(results)
            })

I tried using forkJoin on two of the observables, though none of them observables seems to emit anything. When attempting to use combineLatest after the first observable was valid and completed, the combination of them completed on every emit, even if invalid, of the 2nd observable.

What is the right way to achieve completion of multiple observers when all are completed?

1
Try forkjoin the whole stream other than just .value - Fan Cheung
.value is the stream, it's a Subject. - Shahar Galukman
forkJoin won't emit until all of its source observables complete. - cartant
Both inputs contain valid values, none of them emits though (the console.log calls doesn't yield) - Shahar Galukman

1 Answers

0
votes

I've found a solution using withLatestFrom.

By adding .withLatestFrom(this.zipcodeInput.value) to the Street address observable I've manage to create the dependency I desired.

Still can't figure why forkJoin didn't do the trick.