Angular Google Maps自动完成指令使用PlaceResult对象patchValue失败

解决方法 #

该自动完成组件默认不会将表单控件中存储的PlaceResult对象自动解析为输入框显示的文本，需要手动同步输入框的展示值，修改代码如下：

第一步：修改HTML代码，给输入框添加模板引用

<form [formGroup]="addressForm" #ngForm="ngForm" (ngSubmit)="addressSubmit($event)">
    <mat-form-field floatLabel="always">
        <mat-label>请填写地址</mat-label>
        <!-- 新增#addressInput模板引用 -->
        <input #addressInput matInput matGoogleMapsAutocomplete [types]="['address']" country="us" (onAutocompleteSelected)="onAutocompleteSelected($event)" formControlName="address" placeholder="搜索地址">
    </mat-form-field>
    <div class="button-container">
        <ion-button type="submit">保存并继续</ion-button>
    </div>
</form>

第二步：修改TS代码，手动同步输入框展示值

import { ViewChild, ElementRef } from '@angular/core'; // 新增引入

export class myPage implements OnInit {

    public addressForm: FormGroup;
    // 获取输入框实例
    @ViewChild('addressInput') addressInput: ElementRef<HTMLInputElement>;

    ngOnInit() {
    
        this.addressForm = this.formBuilder.group({
            address: ['', Validators.compose([Validators.required])]
        });
           
        this.getData();
    }

    public getData() {
         const myAddress: PlaceResult = { place_id : 'ChIJcw5BAI63t4kRj5qZY1MSyAo', name: '宾夕法尼亚大道西北1600号', formatted_address: '美国华盛顿哥伦比亚特区宾夕法尼亚大道西北1600号，邮编20500' };

         this.addressForm.patchValue({
             address: myAddress
         });
         // 手动给输入框赋值展示文本
         if(this.addressInput) {
             this.addressInput.nativeElement.value = myAddress.formatted_address;
         }
    }

    onAutocompleteSelected(result: PlaceResult) {
        console.log('选择结果：', result);
    }

    public addressSubmit(event) {
        console.log('表单提交触发');
    }
}

如果遇到视图初始化时序问题，可将getData里的输入框赋值逻辑包一层setTimeout，或者放到ngAfterViewInit生命周期钩子中执行即可。

内容的提问来源于stack exchange，提问作者Iqjot Sangha