angular-material-extensions / google-maps-autocomplete

Autocomplete input component and directive for google-maps built with angular and material design |
https://angular-material-extensions.github.io/google-maps-autocomplete
MIT License
169 stars 60 forks source link

Angular patchValue not working on mat-google-maps-autocomplete #319

Closed YeshudasNair closed 3 years ago

YeshudasNair commented 3 years ago

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

OS and Version?

Windows 10

Versions

ng--version (9.1.15) node --version (12.16.2)

Repro steps

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',
  })

}

The log given by the failure

I'm receiving dynamic data from the backend. During the "Update" process I need to patch the value to all the input fields. While all the other input fields get pre-populated, only the "mat-google-maps-autocomplete" input field remains unpatched. Below I've attached a screenshot of the form that I'm working on. You can observe that all the input fields are pre-populated except the "Enter Address" field, which is a mat-google-maps-autocomplete field. Also, I've highlighted by using arrows, that the value is getting assigned to the mat-google-maps-autocomplete FormControl, but the value is not visible in the HTML.

Desired functionality

I want the backend data to get patched/pre-populated on mat-google-maps-autocomplete in the HTML view. I want the patch value to work on the mat-google-maps-autocomplete field.

Mention any other details that might be useful

I'm working on CRUD operations, where during the update process, 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 throughout the project, except the google places autocomplete search box. google-address

AnthonyNahas commented 3 years ago

hi, you are using reactive form incorrectly...

      googleAddress: 'airoli',
  })

the form control expect a form group and an address object and not a string

please refer to the demo app

thank you