Can't show Google Places place_id in form submission in Angular/Ionic

Question

I'm using Google places autocomplete to return an array of places in the Ion-Searchbar. Everything submits fine in the form except the input of the autocomplete, which should be its own place_id and NOT the actual input. How can I submit the place_id in the form instead of the actual input? Here is the code:

add-place.page.ts

import { Component, NgZone } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { PlacesService } from '../../../services/places.service';
import {} from 'googlemaps';

@Component({
  selector: 'add-place',
  templateUrl: './add-place.page.html',
  styleUrls: ['./add-place.page.scss'],
})
export class AddPlacePage {
  private formCreatePlace: FormGroup;
  GoogleAutocomplete: google.maps.places.AutocompleteService;
  autocomplete: any;
  autocompleteItems: any[];
  location: any;
  placeid: any;
  structuredformatting: any;
  showStorage: any;
  message: String;


  constructor(
    public zone: NgZone, 
    private formBuilder: FormBuilder,
    private placesService: PlacesService) {
      
    this.GoogleAutocomplete = new google.maps.places.AutocompleteService();
    this.autocompleteItems = [];
    this.formCreatePlace = this.formBuilder.group ({
      autocomplete: [''],
      type_of_activity: [''],
      has_owner: [''],
      deal_available: ['']
    })
  }
  
  updateSearchResults(){
    if (this.autocomplete == '') {
      this.autocompleteItems = [];
      return;
    }
    this.GoogleAutocomplete.getPlacePredictions({ input: this.autocomplete },
    (predictions, status) => {
      this.autocompleteItems = [];
      this.zone.run(() => {
        predictions.forEach((prediction) => {
          this.autocompleteItems.push(prediction);
        });
      });
    });
  }
  selectSearchResult(item) {
    console.log(item)
    this.location = item;
    this.placeid = this.location.place_id;
    console.log('Place ID '+ this.placeid)
    this.autocompleteItems = [];
  }

  onSubmit() { 
    this.placesService.create(this.formCreatePlace.value);
  }
}

add-place.page.html

<form [formGroup]="formCreatePlace" (ngSubmit)="onSubmit()"> 
  <ion-grid>
  <ion-row>
    <ion-col size="1">
    </ion-col>
    <ion-col>
      <ion-searchbar animated formControlName="autocomplete" (ngModelChange)="updateSearchResults()" (ionInput)="updateSearchResults()" placeholder="Search for a place"></ion-searchbar>
      <ion-list [hidden]="autocompleteItems.length == 0">
        <ion-item *ngFor="let item of autocompleteItems" tappable (click)="selectSearchResult(item)">
          {{ item.description }}
        </ion-item>
      </ion-list>
    </ion-col>
    <ion-col size="1">
    </ion-col>
  </ion-row>
  </ion-grid>
</ion-form>

Answer 1

The input value is merely a raw text used to return predictions from google api, i dont see a way it could carry the place_id. You should focus your logic on the selectSearchResult function when user clicks an item like so:

selectSearchResult(item) {
   console.log(item)
   this.location = item;
   this.placeid = this.location.place_id;
   console.log('Place ID '+ this.placeid)
   this.autocompleteItems = [];

   //adjust this part with the object you are expecting
   this.placesService.create(this.placeid);
}