Facing an error while setting up the module. "No value accessor for form control with name: 'address'"

[flynsequeira]

OS: Windows 10 Angular Version - 6 Module version - 1.3

IMPORTS child module imports -MatGoogleMapsAutocompleteModule app.module imports -

AgmCoreModule.forRoot({
      apiKey: //some API key//,
      apiVersion: '3.35',
      libraries: ['places']
    }),
    MatGoogleMapsAutocompleteModule.forRoot()

I'm using a reactive form approach as given in the npm page - https://www.npmjs.com/package/@angular-material-extensions/google-maps-autocomplete template

    <mat-google-maps-autocomplete formControlName="address" [country]="de">
    </mat-google-maps-autocomplete>

ts

    this.formGroup = this.builder.group({
      ...
      address: new FormControl(),
     ...
    })
...
    this.formGroup.get('address').valueChanges.subscribe(value => {
      console.log('value changed', value);
    })

OUTPUT

I'm getting multiple errors on loading the page

1. No value accessor for form control with name: 'address'
2. setComponentRestrictions: in property country: not a string; and not an Array
3. InvalidValueError: setTypes: not an Array
4. Google Maps JavaScript API warning: RetiredVersion https://developers.google.com/maps/documentation/javascript/error-messages#retired-version

Please note as given in the image. But the reactive form doesn't update on clicking

On using component based approach.

    <mat-form-field>
      <mat-label>Address</mat-label>
      <input matInput
            formControlName="address"
            (onAutocompleteSelected)="onAutocompleteSelected($event)"
            [country]="de"
            matGoogleMapsAutocomplete>
    </mat-form-field>

It does work. But only by using onAutocompleteSelected. It doesn't update the reactiveForm without that.

[AnthonyNahas]

duplicate #305