InvalidValueError: не является экземпляром HTMLInputElement Angular 5 - PullRequest
Новая
       31

InvalidValueError: не является экземпляром HTMLInputElement Angular 5

0 голосов
/ 01 мая 2018

Я пытаюсь выполнить автозаполнение для адреса, используя google mapsAPI в моем приложении, но у меня постоянно появляется ошибка «InvalidValueError: not instance of HTMLInputElement». Ниже приведены вещи, которые я пробовал

HTML ввод внутри формы. Как видите, я попробовал фокусировку, но она тоже не сработала. 

 <input id="address" type="text" name="address" #address="ngModel" [(ngModel)]="markersService.selectedMarker.address" placeholder="Address" 
    autocorrect="off"
    autocapitalize="off"
    spellcheck="off"
    class="inputFields"
    required
    (focus)="autocompleteSearch()"/>

.ts файл 

 //I implemented this in an app with Angular 4 and it worked, now with Angular5 it' doesn't
 ngAfterViewInit() {
    this.autocompleteSearch();
 }


  autocompleteSearch() {
    /*
    I tried this trick based on some answers I saw in different places, but it didn't work
    var addressInput = document.getElementById('address').getElementsByTagName('input')[0];
    of course I was passing this in the code below instead of the addressElement
    */
    this.mapsAPILoader.load().then(
      ()=>{
        let autocomplete = new google.maps.places.Autocomplete(this.addressElement.nativeElement, { types:["address"]});
        autocomplete.addListener('places_changed', ()=> {
          this.ngZone.run(()=> {
            let place: google.maps.places.PlaceResult = autocomplete.getPlace();

            if(place.geometry === undefined || place.geometry === null) {
              return;
            }
          });
        })
      }
    )
  }

Я пробовал 4 разные вещи, не повезло, чтобы это заработало

1 Ответ

0 голосов
/ 02 мая 2018

Ссылочная переменная шаблона #address связана с ngModel. Вы можете определить другой, как #address1: 

<input #address1 #address="ngModel" ... >

и использовать его для доступа к элементу в коде: 

@ViewChild('address1') public addressElement: ElementRef;

...

let inputElement = this.addressElement.nativeElement as HTMLInputElement;
...