角反应形式值不会使用Google地址自动完成功能更新

Question

这是我的HTML

<input type="text" formControlName="Address" class="form-control col-md-12 addressfield" />

我使用的Google地址

for (i = 0; i < x.length; i++) {
  new google.maps.places.Autocomplete(document.getElementsByClassName("addressfield")[i], {types: ['geocode']});
        }

这工作正常，并且Google地址显示了选项，我可以选择地址。

但是当我尝试获取值时，它仅显示我键入的文本

this.someForm.value.Address

例如，我键入以下内容并选择第一个选项

但是当我尝试获取值时，它只显示我键入的部分，而不显示我选择的值

Answer 1

那样行不通

原因是： 您在输入formControl中输入内容，但是google地址显示在google lib it自身创建的其他元素上，因此，当您选择选项之一时，它将adreess设置为其创建的元素，而不是输入中。您需要在place_changed事件上进行设置。

以下是代码段，可能会对您有所帮助：

let autocomplete = new google.maps.places.Autocomplete(document.getElementsByClassName("addressfield")[i], {types: ['geocode']});
autocomplete.addListener("place_changed", () => {
    let place = autocomplete.getPlace();
    this.YOUR_FORM_GROUP.get('Address').setValue(place.formatted_address)
});

Answer 2

这就是我要解决的问题

在.html文件中，我向元素添加了一个ID

PropertyChanged

在component.ts中，我添加了以下代码

我添加了ElementRef来导入

<input type="text"  formControlName="Address" #Address class="form-control col-md-12 addressfield" />

我宣布了价值

import { Component, NgModule,ElementRef } from '@angular/core';

然后从输入中获取值，而不是我使用的@ViewChild('Address',{static:false}) Address: ElementRef; //here the 'Address' should be same as the ID value (#Address) that you used in the .html

this.someform.value.Address

这具有由Google插件填充的完整地址