Понимание Угловая синхронизация 2 наблюдаемых

Question

У меня есть регистрационная форма, которая должна быть подтверждена перед отправкой. Для этого у меня есть метод, который выдает ошибку в массив ошибок. Если длина ошибки равна нулю, я отправляю эту форму на сервер, иначе я показываю список ошибок.

signUpForm() { 
    this.validateOnSubmit(); 
    console.log(this.TAG + 'submit method fired! '); 

    console.log('errors array' + JSON.stringify(this.errors)); 

    if (this.errors.length == 0) { 

     /* Sending process*/ 
    } else { 
     this.showOnSubmitError(this.errors); 
    } 
    } 

Адресная часть формы проверяется с просьбой к Google api через Observables.

validateOnSubmit() { 

    let fullAddress = this.regModel.Addresses[0].State + ', '; 
    fullAddress += this.regModel.Addresses[0].Street + ', '; 
    fullAddress += this.regModel.Addresses[0].City + ', '; 
    fullAddress += this.regModel.Addresses[0].Zip + ' '; 

    this.signUpHelperProvider.resolveAddr(fullAddress) 
     .subscribe(response => { 
      this.geoCodeResp = response; 
      console.log(this.TAG + 'Before submission: check received geocode response stringify: ' + JSON.stringify(this.geoCodeResp)); 
      if (this.geoCodeResp.status != 'OK' || this.geoCodeResp.results[0].address_components.length == 1) { 
      console.log('WE HAVE A PROBLEM'); 
      this.errors.push('Please, check if your address correct'); 
      console.log('WE HAVE A PROBLEM error:' + this.errors.toString()); 

      } else { 
      this.regModel.Addresses[0].Longitude = this.geoCodeResp.results[0].geometry.location.lng; 
      this.regModel.Addresses[0].Latitude = this.geoCodeResp.results[0].geometry.location.lat; 
      } 
     }); 
// 
//other checks 
// 
console.log('total errors in method: ' + this.errors.toString()); 
} 

И вот в чем проблема: фактическая проверка длины ошибки происходит до завершения метода проверки.

I: [INFO:CONSOLE(9)] "SignUpHelperProvider: resolveAddr: address passed NY, Hfjdir6rhc, Durfjfu, 35682 ", source: 
I: [INFO:CONSOLE(14)] "total errors in method: ", 
I: [INFO:CONSOLE(13)] "SignUpPage: submit method fired! ", 
I: [INFO:CONSOLE(13)] "errors array[]", 
I: [INFO:CONSOLE(14)] "SignUpPage: Before submission: check received geocode response stringify: {"results":[{"address_components":[{"long_name":"United States","short_name":"US","types":["country","political"]}],"formatted_address":"United States","geometry":{"bounds":{"northeast":{"lat":71.5388001,"lng":-66.885417},"southwest":{"lat":18.7763,"lng":170.5957}},"location":{"lat":37.09024,"lng":-95.712891},"location_type":"APPROXIMATE","viewport":{"northeast":{"lat":49.38,"lng":-66.94},"southwest":{"lat":25.82,"lng":-124.39}}},"partial_match":true,"place_id":"ChIJCzYy5IS16lQRQrfeQ5K5Oxw","types":["country","political"]}],"status":"OK"}", 
I: [INFO:CONSOLE(14)] "WE HAVE A PROBLEM", 
I: [INFO:CONSOLE(14)] "WE HAVE A PROBLEM error:Please, check if your address correct", 

Есть ли способ синхронизировать этот процесс? Я новичок в Angular 2 и Ionic 2 и буду благодарен за любой намек или помощь.

Answer 1

Ваш signUpHelperProvider.resolveAddr является асинхронным. Все, что вам нужно сделать, это сделать процесс отправки по подписке. Один из способов сделать это - использовать map вместо подписки в пределах validateOnSubmit и вернуть наблюдаемый. Как так -

validateOnSubmit() { 

    let fullAddress = this.regModel.Addresses[0].State + ', '; 
    fullAddress += this.regModel.Addresses[0].Street + ', '; 
    fullAddress += this.regModel.Addresses[0].City + ', '; 
    fullAddress += this.regModel.Addresses[0].Zip + ' '; 

    //return async op to subscribe 
     return this.signUpHelperProvider.resolveAddr(fullAddress) 
      .map(response => { 
       this.geoCodeResp = response; 
       console.log(this.TAG + 'Before submission: check received geocode response stringify: ' + JSON.stringify(this.geoCodeResp)); 
       if (this.geoCodeResp.status != 'OK' || this.geoCodeResp.results[0].address_components.length == 1) { 
       console.log('WE HAVE A PROBLEM'); 
       this.errors.push('Please, check if your address correct'); 
       console.log('WE HAVE A PROBLEM error:' + this.errors.toString()); 

       } else { 
       this.regModel.Addresses[0].Longitude = this.geoCodeResp.results[0].geometry.location.lng; 
       this.regModel.Addresses[0].Latitude = this.geoCodeResp.results[0].geometry.location.lat; 
       } 
      // 
      //other checks 
      // 
     console.log('total errors in method: ' + this.errors.toString()); 
     return response;//return the response in case required at subscription 
      }); 

    } 

Ваш signUpForm будет:

signUpForm() { 
    this.validateOnSubmit().subscribe(response=>{ 
    console.log(this.TAG + 'submit method fired! '); 

    console.log('errors array' + JSON.stringify(this.errors)); 

    if (this.errors.length == 0) { 

     /* Sending process*/ 
    } else { 
     this.showOnSubmitError(this.errors); 
    } 
    }); 
    } 

IMO вам необходимо выполнить такие асинхронные звонки в поставщике