Pfthb

I am working on an Angular 6 project, my two form inputs for the address are using AGM to integrate the places API and are suppose to show suggestions for addresses for end users to simplify data entry. However, after form data is submitted to database, the result only show first three or four letter of the whole address, look below for more info:

<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>

I have used the script below my component.ts file to get the value of the input/form when saved/submitted:

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
 );

Images below show what I am talking about, the users actually searched for 65 Halsey Avenue and St Michael school.