Unable to Patch Value using PlaceResult Object on Autocomplete Directive

[sangha-pareto]

Bug Report

- [ x ] bug report 

OS and Version?

macOS Catalina v. 10.15.7

Versions

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/

Angular CLI: 11.2.13
Node: 14.17.0
OS: darwin x64

Angular: 11.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker
Ivy Workspace: <error>

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.1102.13
@angular-devkit/build-angular      0.1102.13
@angular-devkit/core               11.2.13
@angular-devkit/schematics         11.2.13
@angular/cdk                       11.2.12
@angular/cli                       11.2.13
@angular/flex-layout               12.0.0-beta.34
@angular/material                  11.2.12
@angular/material-moment-adapter   11.2.12
@schematics/angular                11.2.13
@schematics/update                 0.1102.13
rxjs                               6.6.7
typescript                         4.0.7

"@angular-material-extensions/google-maps-autocomplete": "^6.2.1",

Repro steps

Please see the following code.

HTML:

<form [formGroup]="addressForm" #ngForm="ngForm" (ngSubmit)="addressSubmit($event)">
        <mat-form-field floatLabel="always">
            <mat-label>Tell us where they are located</mat-label>
            <input matInput matGoogleMapsAutocomplete [types]="['address']" country="us" (onAutocompleteSelected)="onAutocompleteSelected($event)" formControlName="address" placeholder="Search Address">
        </mat-form-field>
        <div class="button-container">
            <ion-button type="submit">Save and Continue</ion-button>
        </div>
    </form>

TS:

export class myPage implements OnInit {

    public addressForm: FormGroup;

    ngOnInit() {

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

            this.getData();
    }

    public getData() {

             const myAddress: PlaceResult = { place_id : 'ChIJcw5BAI63t4kRj5qZY1MSyAo', name: '1600 Pennsylvania Avenue NW', formatted_address: '1600 Pennsylvania Avenue NW, Washington, DC 20500, USA' };

             this.addressForm.patchValue({
                  address: myAddress
              });
    }

    onAutocompleteSelected(result: PlaceResult) {
        console.log('result: ', result);
    }

    public addressSubmit(event) {
        console.log('addressSubmit(event)');
    }
}

The log given by the failure

No errors in the logs.

Desired functionality

I would like to see the autocomplete directive patched with the value I am passing it in getData(). I did see issue #319 where the user is patching a string. However, I am trying to patch a PlaceResult object as suggested by the library owner in that issue but it still does not work. I do understand myAddress is not the full PlaceResult object but I have tried it. I chose this condensed version for the sake of simplicity.

Can someone explicitly show me an example of how to update the autocomplete control's value?

Thank you for your help.

[matthew-valenti]

This looks like a bug in MatGoogleMapsAutocompleteComponent. How can I help resolve this issue or find a workaround?

The component template contains an input bound to the address property: ... <input matInput [(ngModel)]="address" ...

The address property is defined as address: PlaceResult | string;

This input displays the address successfully when an address is selected because in initGoogleMapsAutocomplete the listener explicitly sets the address property to a string: this.address = place.formatted_address;

On form patchValue the writeValue method value is called successfully. However, I can't see any code that updates the address property. So the form control does not show the patchValue address. Maybe the intended behavior here is that the listener should fire?

writeValue(obj) {
    if (obj) {
        this.value = obj; // This line is successfully run on patchValue
    }
}

[AnthonyNahas]

are you using the latest version?

[AnthonyNahas]

PR is appreciated guys