Angular 4 Google Maps API Formularsteuerungsaktualisierung Problem

Question

Ich habe versucht, die einfachste Autocomplete-Eingabe möglich, wo Benutzer Adresse schreibt, klickt auf bestimmten Wert von Google Maps API-Dropdown und nach dem Füllen andere Lücken, die er speichern kann reaktive Form onClick.

Ich bin jedoch nicht in der Lage, richtigen Wert in FormControl zu injizieren. Wenn der Benutzer "Washi" aufschreibt und auf "Washington D.C." klickt Der in der Eingabe angezeigte Wert ist korrekt, aber wenn ich mein Formular speichere, erhalte ich 'Washi' in der Firebase-Datenbank anstelle von 'Washington D.C.'. Hier ist mein Code:

<input id="address" type="text" class="form-control" formControlName="address" /> 

Und in xxxxx.component.ts:

ngAfterViewInit(){ 

    let input = <HTMLInputElement>document.getElementById("address"); 

    this.mapsAPILoader.load().then(
    () => { 
     let autocomplete = new google.maps.places.Autocomplete(input, {types: ['address']}); 

     autocomplete.addListener('place_changed',() => { 

     const place = autocomplete.getPlace(); 
     this.ngZone.run(() => { 

      this.cd.detectChanges(); 
      this.myGroup.value.address = place.formatted_address; 
      console.log(this.myGroup.value.address); 
     }); 
     }); 
    } 
);} 

reaktive Form geladen wird OnInit und alles gut zu funktionieren scheint. Console.log zeigt den richtigen Wert an, aber nicht den Wert, der in die Datenbank übertragen wird. Hier ist die Speicherfunktion:

save(myGroup: NgForm){ 

    this.user = this._firebaseAuth.authState; 
    this.user.subscribe(
     (user) => { 
      if (user) { 
       this.userDetails = user; 

       this.first.subscribe(snapshot => { 

         if (snapshot.exists() === false) { 

          firebase.database().ref('path').set({ 
           record: this.myGroup.value 
          }); 

         } else { 
          this.userDetails = null; 
         } 
        } 
       ); 
      } 
     } 
    ); 

} 

Irgendwelche Ideen?

Answer 1

Falls jemand an der Lösung interessiert ist, musste ich nur eine Hilfsvariable hinzufügen, die den Wert von Google Autocomplete enthält. Dann (onClick) erkläre ich, dass der Wert von FormControl dem Wert von help var entspricht.