1

I am using https://www.npmjs.com/package/@angular-material-extensions/google-maps-autocomplete to add an address autocomplete control on my form. The control successfully provides addresses when the user begins typing and I am able to retrieve the user's selection as well. My issue arises when I try to take the user selected address and patch it to the form. I have created an example to demo my issue below.

I have created an issue directly in GitHub but there has not been any movement. Therefore, I am deciding to reach out here. If interested see https://github.com/angular-material-extensions/google-maps-autocomplete/issues/322

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

Thank you for your help.

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"

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)');
    }
}

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.