angular-material-extensions
Unable to Patch Value using PlaceResult Object on Autocomplete Directive
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.
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
}
}
