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