Google карты автозаполнения угловыми материалами

Question

Я пытаюсь использовать автозаполнение карт Google в форме угловых материалов, когда пользователь вводит местоположение. Кажется, он неправильно читает ввод, потому что я получаю эту ошибку:

Вот мой код

HTML:

<mat-form-field>
             <input matInput placeholder="Event Location" [formControl]="eventLocation" required #search type="text" id= "place">
</mat-form-field>

ц:

firstFormGroup: FormGroup;
public eventLocation: FormControl;
public searchElementRef: ElementRef;
eventPost: Latlong;
eventLat: number;
eventLng: number;
@ViewChild('search')

ngOnInit() {

      this.firstFormGroup = this._formBuilder.group({
        eventName: ['', Validators.required],
        eventLocation: ['', Validators.required]
      });
      this.eventLocation = new FormControl;
      this.mapsAPILoader.load().then(() => {
        const autocomplete = new google.maps.places.Autocomplete(
          this.searchElementRef.nativeElement, {
            types: []
        });
          autocomplete.addListener('place_changed', () => {
            this.ngZone.run(() => {
              const place: google.maps.places.PlaceResult = autocomplete.getPlace();
              if (place.geometry === undefined || place.geometry === null) {
                return;
              }
              this.eventPost = {
                latitude: place.geometry.location.lat(),
                longitude: place.geometry.location.lng()
              };
              this.mydata.latlongSource.next({ ...this.eventPost });
              this.eventLat = this.eventPost.latitude;
              this.mydata.markerLatSource.next( this.eventLat);
              this.eventLng = this.eventPost.longitude;
              this.mydata.markerLngSource.next( this.eventLng);
              this.eventLocation.reset();
            });
          });
      });

Answer 1

nativeElement является элементом DOM.У вас еще нет DOM в OnInit хуке.Используйте AfterViewInit для доступа к элементам DOM:

ngAfterViewInit() {

      this.firstFormGroup = this._formBuilder.group({
        eventName: ['', Validators.required],
        eventLocation: ['', Validators.required]
      });