Angular Material: Patch value not working on Google places autocomplete input box

Viewed 188

I'm receiving dynamic data from the backend, which I need to patch to the form input boxes. PatchValue is working on other input fields, except the google places autocomplete search box. When I consoled the form controls, I realized that the dynamic/static value is getting assigned to the Google places formcontrol, but the value is not visible in the HTML. Please Help.

HTML

<form class="example-form" [formGroup]="form">
  <mat-form-field class="pb-2 example-full-width">
    <mat-label>Enter Address</mat-label>
        <input matInput matGoogleMapsAutocomplete formControlName="googleAddress">
  </mat-form-field>
</form>

TS

import { Component, OnInit, AfterViewInit, ViewChild, TemplateRef } from '@angular/core';
import { FormBuilder, NgForm, FormGroup, Validators, FormControl, FormGroupDirective } from '@angular/forms';
import {MatInputModule} from '@angular/material/input';

export class googlePlacesSearchInput implements OnInit {

form:FormGroup;

constructor( public fb: FormBuilder ) { }

ngOnInit(): void {
  this.initializeForm()
}

initializeForm(){
  this.form = this.fb.group({
    googleAddress: [''],
  })
}

this.form.patchValue({
    googleAddress: 'airoli',
  })

}

Please view the image for better illustation. I did the binding of all the form values in the HTML, and the image shows how the binding works on all the input fields except the Google Address input field.

0 Answers
Related