I am using the ngx-google-places-autoplete 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 autoplete dropdown and then submit the form, the value of the submitted in my formBuilder array is 'Por' instead of the full selected value?

My ponent 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-autoplete [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 ponent.ts I have the following (again reduced for brevity);

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

constructor(fb: FormBuilder, private router: Router, private service: SearchService, private http: Http) {
        this.searchForm = fb.group({
            'location': ['', Validatorspose([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?

I am using the ngx-google-places-autoplete 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 autoplete dropdown and then submit the form, the value of the submitted in my formBuilder array is 'Por' instead of the full selected value?

My ponent 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-autoplete [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 ponent.ts I have the following (again reduced for brevity);

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

constructor(fb: FormBuilder, private router: Router, private service: SearchService, private http: Http) {
        this.searchForm = fb.group({
            'location': ['', Validators.pose([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?

• javascript
• angular

3 Answers 3

I had the same problem and neither using NgModel or FormControl was getting the autopleted 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-autoplete [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 ponent.ts:

@ViewChild('addressInput')
addressInput: ElementRef;

...

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

You could use the onAddressChange event in ngx-google-places-autoplete ponent.

So below is my html template:

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

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

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

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

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