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?
forkJoinwon't emit until all of its source observables complete. - cartant