How can I merge these two observables and remove the nested observable?

Question

I'm struggling with understanding how to merge two observables and make use of their merged product. I've watched countless videos on mergeMap, switchMap, flatMap, marble diagrams etc but I still don't get how merging observables works. I feel like I'm not going to be efficient, or even correct, when using RxJS.

I have an observable that I'm subscribing to, and I want to also subscribe to the valueChanges observable of a particular form array within my code. However I need to ensure that the second subscription only occurs after the form array has been properly built otherwise I'll get null errors.

Obviously one was to do this is to subscribe to valueChanges within the next function of my first subscription, however this is bad practice and I want to avoid it. However I'm not sure in what way I should be structuring my code so that I get the behaviour I want without using nested subscriptions.

setSettings$(serial: string) {
    return this.getSettingsFromSerial$(serial).pipe(
      tap(val => {
        this.settingsState.savedSettingsState = val;
        this.settingsState.ipRestrictionEnabled = val.ipRestrictionSettings.ipRestrictionEnabled;
        if(val.ipRestrictionSettings.ipRanges.length === 0){
          this.addEmptyRange();
        }
        else
        {
          for (const i of val.ipRestrictionSettings.ipRanges) {
            this.addRange(i.startRange, i.endRange, i.label);
          }
        }
        this.settingsState.displaySettings = true;
        this.settingsState.displayForm = true;
        this.hideRangeErrorsUntilNotPristine(); <-- I need to merge (?) this with my first observable to ensure that it happens after the form is built.
      })
    );
  }

  // TODO :: Cancel this on destroy 
  hideRangeErrorsUntilNotPristine(){
    this.ipRangeFormArray.valueChanges.subscribe( res => {
      let formGroups = this.ipRangeFormArray.controls;

      for(let i = 0; i < formGroups.length; i++){
        if(formGroups[i].pristine === true) {
          this.settingsState.ipRangeValidStates[i].displayError = false;
        }
        else {
          this.settingsState.ipRangeValidStates[i].displayError = true;
        }
      }
    });
  }

Answer 1

From what I understand, all you need to do is make sure that this method is called once the FormControl objects have been instantiated in your TypeScript code. I've chosen mergeMap for no particular reason, as you only need to worry about which operator to use if the outer Observable emits multiple times.

setSettings$(serial: string) {
    return this.getSettingsFromSerial$(serial).pipe(
      tap(val => {
        this.settingsState.savedSettingsState = val;
        this.settingsState.ipRestrictionEnabled = val.ipRestrictionSettings.ipRestrictionEnabled;
        if(val.ipRestrictionSettings.ipRanges.length === 0){
          this.addEmptyRange();
        }
        else
        {
          for (const i of val.ipRestrictionSettings.ipRanges) {
            this.addRange(i.startRange, i.endRange, i.label);
          }
        }
        this.settingsState.displaySettings = true;
        this.settingsState.displayForm = true;
      }),
      // this gets called once everything in the `tap` has finished,
      // because everything is synchronous
      mergeMap(() => this.hideRangeErrorsUntilNotPristine())
    );
  }