Google 放置自动完成 Angular，如果找不到结果则获取文本

Question

我正在使用 google 地图服务构建一个用于地址搜索的自动完成组件，为此我正在使用 Angular 9. 我的组件可以工作，但我需要捕获输入的值使用模糊事件或输入失去焦点时没有可用的搜索。

目前组件检测到我 select 地址，但我需要让它在找不到任何内容时也检测到我键入的文本。

我的html:

 <input #search class="form-control" [formControl]="myAddress" type="text" placeholder="Enter a location">

我的学生：

export class AddressComponent implements OnInit {

  @Output() onSelectAddress = new EventEmitter<CustomAddressModel>();

  myAddress = new FormControl('');
  selectedAddress: PlaceResult;

  @ViewChild('search')
  searchElementRef: ElementRef;

  constructor(
    private _mapsAPILoader: MapsAPILoader,
    private ngZone: NgZone,
  ) { }

  ngOnInit(): void {

    this._mapsAPILoader.load().then(() => {

      const autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement);
      autocomplete.addListener("place_changed", () => {
        this.ngZone.run(() => {

          this.selectedAddress = autocomplete.getPlace();

          if (!this.selectedAddress.geometry) {
            return;
          }

          const result = {
              lat: this.selectedAddress.geometry.location.lat(),
              long:  this.selectedAddress.geometry.location.lng(),
              strAddress:  this.selectedAddress.formatted_address
          } as CustomAddressModel;

          this.onSelectAddress.emit(result);

        });
      });
    });
  }
}

有什么想法吗？

Answer 1

通常需要订阅输入控件的值变化

ngOnInit() {
    this.formchanges();
  }


  formchanges()
  {
     this.yourform.controls['myAddress'].valueChanges.pipe(
      debounceTime(500),
      finalize(() => {
        
      })).subscribe(x => {
      var address = safeTrim(this.yourform.get('myAddress').value);

          this.getAddress(address);
        }
      });
  }
  
  getAddress()
  {
     //your call to the google maps api goes here 
  }

我不确定，我是否能够回答你的问题。

Google 放置自动完成 Angular，如果找不到结果则获取文本

Google place automplete Angular, get text if not found results

javascript

maps

events

angular