ngx-google-places-autocomplete如何捕获非自动补全地址输入事件

可以通过以下几种方式捕获未选择自动补全值的场景：

方式一：监听FormControl的valueChanges #

因为输入框已绑定formControlName="addressString"，可直接监听表单控件的值变化，同时标记是否为自动补全选择的地址，以此区分手动输入场景：

修改TS代码 #

import { Component, ViewChild, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { NgxGooglePlacesAutocompleteDirective } from 'ngx-google-places-autocomplete';

@Component({
  // 组件元数据
})
export class YourComponent implements OnInit {
  yourForm = new FormGroup({
    addressString: new FormControl('', [Validators.required])
  });

  @ViewChild('placesRef') placesRef!: NgxGooglePlacesAutocompleteDirective;
  private isAutocompleteSelected = false;

  ngOnInit() {
    this.yourForm.get('addressString')?.valueChanges.subscribe((value) => {
      if (!this.isAutocompleteSelected && value) {
        // 处理手动输入未选择自动补全的场景
        this.handleManualInput(value);
      }
      this.isAutocompleteSelected = false;
    });
  }

  public handleAddressChange(address: any) {
    this.isAutocompleteSelected = true;
    // 原自动补全处理逻辑
    console.log('自动补全选择的地址:', address);
  }

  private handleManualInput(value: string) {
    console.log('手动输入未选择自动补全:', value);
    // 可添加业务逻辑，比如提示用户选择推荐地址、验证输入格式等
  }
}

方式二：监听输入框的blur事件 #

通过监听输入框失去焦点事件，对比当前输入值与自动补全选择的地址值，判断是否为手动输入：

修改HTML代码 #

<input
  matInput
  ngx-google-places-autocomplete
  [options]="options"
  #placesRef="ngx-places"
  (onAddressChange)="handleAddressChange($event)"
  (blur)="handleInputBlur()"
  formControlName="addressString"
  required
/>

修改TS代码 #

import { Component, ViewChild } from '@angular/core';
import { NgxGooglePlacesAutocompleteDirective } from 'ngx-google-places-autocomplete';

@Component({
  // 组件元数据
})
export class YourComponent {
  @ViewChild('placesRef') placesRef!: NgxGooglePlacesAutocompleteDirective;
  private selectedAutocompleteValue: string = '';

  public handleAddressChange(address: any) {
    this.selectedAutocompleteValue = address.formatted_address;
    // 原自动补全处理逻辑
    console.log('自动补全选择的地址:', address);
  }

  public handleInputBlur() {
    const currentInputValue = this.yourForm.get('addressString')?.value;
    if (currentInputValue && currentInputValue !== this.selectedAutocompleteValue) {
      // 处理未选择自动补全的场景
      console.log('输入了自动补全列表外的内容:', currentInputValue);
    }
  }
}

方式三：监听自动补全面板关闭事件 #

利用组件API监听自动补全面板关闭事件，结合当前输入值与选中地址的对比，判断是否为手动输入：

修改TS代码 #

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { NgxGooglePlacesAutocompleteDirective } from 'ngx-google-places-autocomplete';
import { Autocomplete } from '@agm/core/services/google-maps-types';

@Component({
  // 组件元数据
})
export class YourComponent implements AfterViewInit {
  @ViewChild('placesRef') placesRef!: NgxGooglePlacesAutocompleteDirective;

  ngAfterViewInit() {
    const autocomplete = this.placesRef.getAutocomplete() as Autocomplete;
    autocomplete.addListener('close', () => {
      const currentInputValue = this.yourForm.get('addressString')?.value;
      const selectedPlace = autocomplete.getPlace();
      if (currentInputValue && (!selectedPlace || selectedPlace.formatted_address !== currentInputValue)) {
        // 处理未选择自动补全的场景
        console.log('未选择自动补全地址，输入内容:', currentInputValue);
      }
    });
  }

  public handleAddressChange(address: any) {
    // 原自动补全处理逻辑
    console.log('自动补全选择的地址:', address);
  }
}

你可根据业务需求选择合适方案：需要实时监听输入变化选方式一，需要在输入完成（失去焦点）时处理选方式二或三。

内容的提问来源于stack exchange，提问作者Hamza Khan