CODEWITHSUNDEEP
javascriptangular
Matthew Flynn
Matthew Flynn

Reputation: 3941

ngx-google-places-autocomplete input not updating selected string

I am using the ngx-google-places-autocomplete plugin on a form where we need the user to enter a location for in a search form.

However, if I were to begin typing a place such as 'Por' and then select 'Porto' from the populated autocomplete dropdown and then submit the form, the value of the submitted in my formBuilder array is 'Por' instead of the full selected value?

My component html is (I've removed other fields for brevity);

<form class="search" [formGroup]="searchForm" (ngSubmit)="submit(searchForm.value)">
    <div  class="form-row" *ngIf="formState == 'active'">
        <div class="col">
            <input class="form-group special-input" ngx-google-places-autocomplete [options]='googlePlacesOptions' formControlName="location" #placesRef="ngx-places" />
        </div>
        <div class="col">
            <button type="submit" class="btn btn-primary btn-block">Search</button>
        </div>
    </div>
</form>

Then in my component.ts I have the following (again reduced for brevity);

googlePlacesOptions = {
    types: [],
    componentRestrictions: { country: 'PT' }
};

constructor(fb: FormBuilder, private router: Router, private service: SearchService, private http: Http) {
        this.searchForm = fb.group({
            'location': ['', Validators.compose([Validators.required])]
        });
    }

submit(form: any): void {
        ... here the value is partial and not the fully selected string
}

Am I missing something here to enable this?

Upvotes: 2

Views: 6284

Answers (3)

Dinusha
Dinusha

Reputation: 21

You could use the onAddressChange event in ngx-google-places-autocomplete component.

So below is my html template:

<input type="text" formControlName="address" 
          ngx-google-places-autocomplete [options]='googlePlacesOptions' (onAddressChange)="handleAddressChange($event)"/>

Handle your form field update in handleAddressChange function in you component.ts file. Mine looks like below;

 handleAddressChange(address: any) {
    this.form.get('address').setValue(address.formatted_address);
 }

Upvotes: 0

Rafael Cer&#225;volo
Rafael Cer&#225;volo

Reputation: 763

I had the same problem and neither using NgModel or FormControl was getting the autocompleted value from the input. This is probably due to some conflict with the original js lib.

To solve I used @ViewChild to get access to the input and get the value from there.

In your html template add #addressInput on the input: 

<form class="search" [formGroup]="searchForm" (ngSubmit)="submit(searchForm.value)">
<div  class="form-row" *ngIf="formState == 'active'">
    <div class="col">
        <input #addressInput class="form-group special-input" ngx-google-places-autocomplete [options]='googlePlacesOptions' formControlName="location" #placesRef="ngx-places" />
    </div>
    <div class="col">
        <button type="submit" class="btn btn-primary btn-block">Search</button>
    </div>
</div>

And in your component.ts: 

@ViewChild('addressInput')
addressInput: ElementRef;

...

submit(form: any): void {
    // here you can now get the full input string:
   const inputValue = this.addressInput.nativeElement.value;
}

Upvotes: 4

Lotte Lemmens
Lotte Lemmens

Reputation: 581

We opted to update the form with the result from google autocomplete:

ngAfterViewInit() {
    const autoComplete = this.mapService.getGoogleAutocomplete(this.autocompleteGoogle.nativeElement);
    this.search$.asObservable()
        .debounceTime(250)
        .map(() => autoComplete)
        .switchMap(() => this.mapService.getGoogleAutocomplete$(autoComplete))
        .subscribe((place: any) => {
            this.Form.get('location').setValue(place.formatted_address);
        });
}

Upvotes: -1

Related Questions