0
사용자가 주소를 적어두고 Google지도 API 드롭 다운에서 특정 값을 클릭하고 저장할 수있는 다른 간격을 채우면 가장 간단한 자동 완성 입력을 만들려고했습니다. 반응 형 양식 onClick.각도 4 Google지도 API 양식 컨트롤 업데이트 문제
그러나 FormControl에 적절한 값을 주입 할 수 없습니다. 사용자가 'Washi'를 쓰고 'Washington D.C'을 클릭하면 값은 정확하지만, 폼을 저장하면 'Washington D.C.'대신 Firebase 데이터베이스에 'Washi'가 표시됩니다.
<input id="address" type="text" class="form-control" formControlName="address" />
과의 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);
});
});
}
);}
반응성 양식을하는 OnInit 모든 것이 잘 작동하는 것 같다로드 여기 내 코드입니다. Console.log는 적절한 값을 표시하지만 데이터베이스로 전송되는 값은 표시하지 않습니다. 저장 기능은 다음과 같습니다.
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;
}
}
);
}
}
);
}
아이디어가 있으십니까?