Угловые гугл карты мест автозаполнения ввода не отображаются на выходе

Question

Я работаю над проектом Angular 6, мои два ввода формы для адреса используют AGM для интеграции API мест и, как предполагается, показывают предложения по адресам для конечных пользователей, чтобы упростить ввод данных. Однако после отправки данных формы в базу данных в результате отображаются только первые три или четыре буквы целого адреса, для получения дополнительной информации см. Ниже:

<mat-form-field>
    <input matInput placeholder="pickUp Address" autocorrect="off" autocapitalize="off" spellcheck="off" google-place type="text" formControlName="pickUpAddress">
  <!-- <input matInput type="text" formControlName="pickUpAddress" placeholder="pickUp Address"> -->
  <mat-error *ngIf="form.get('pickUpAddress').invalid">Please enter a Pickup Address.</mat-error>
</mat-form-field>
<mat-form-field>
    <input matInput placeholder="dropoff Address" autocorrect="off" autocapitalize="off" spellcheck="off" google-place type="text"  formControlName="schoolLocation">
  <!-- <input matInput type="text" formControlName="schoolLocation" placeholder="school Name"> -->
  <mat-error *ngIf="form.get('schoolLocation').invalid">Please enter a dropoff address.</mat-error>
</mat-form-field>

Я использовал скрипт ниже моего файла component.ts, чтобы получить значение ввода / формы при сохранении / отправке:

onSavePost() {
if (this.form.invalid) {
  return;
}
this.isLoading = true;
if (this.mode === 'create') {
  this.postsService.addPost(
    this.form.value.pickUpAddress,
    this.form.value.schoolLocation
  );
} else {
  this.postsService.updatePost(
    this.postId,
    this.form.value.pickUpAddress,
    this.form.value.schoolLocation
  );

Изображения ниже показывают, о чем я говорю, пользователи действительно искали 65 Halsey Avenue и школу Святого Михаила.