InvalidValueError: не экземпляр HTMLInputElement Angular 5
Я пытаюсь выполнить автозаполнение для адреса с помощью API карт Google в своем приложении, но продолжаю получать ошибку «InvalidValueError: не экземпляр 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 разные вещи, не повезло, чтобы это работало
Что касается "уловки", вы можете попробовать: const addressInput = document.getElementById('address'); и заменить this.addressElement.nativeElement на addressInput (хотя использование document.getElementById не является способом доступа к элементам в Angular).
@ConnorsFan нет, они не находятся внутри ngIf или ngFor. Вы правы, это не лучший способ сделать это с помощью angular, но я был полон решимости попробовать все, лол. Константа addressInput = document.getElementById ('адрес'); не сработало. Я получаю сообщение об ошибке в коде VS: «Аргумент типа HTMLElement не может быть назначен параметру типа HTMLInputElement. Свойство accept отсутствует в типе HTMLElement».
Покажите, пожалуйста, декларацию addressElement, это самое главное. Для "уловки" попробуйте: const addressInput = document.getElementById('address') as HTMLInputElement;.
@ConnorsFan @ViewChild ('address') public addressElement: ElementRef; Теперь с const addressInput = document.getElementById('address') as HTMLInputElement; я не получаю исходную ошибку, но автозаполнение не работает, и я больше не вижу ошибок в консоли
@ConnorsFan Я получаю это предупреждение, но без ошибки. Может ли это быть причиной того, что автозаполнение не работает? Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help
@ConnorsFan, поэтому я понимаю, что он работает вне модального окна, в модальном он не работает
Переменная шаблона #address привязана к ngModel. Вы должны определить еще один, например #address1, во входном элементе и использовать его в @ViewChild('address1'). Это должно работать (вместо использования document.getElementById). Я не уверен, что это поможет решить другие проблемы.
@ConnorsFan, может быть, это было частью исправления. Я также заметил, что автозаполнение находится за модальным окном, поэтому я добавил `.pac-container {z-index: 10000! Important; } 'и это заставило его появиться поверх модального окна. Большое спасибо, чувак !! Если хотите, опубликуйте его как ответ, чтобы я мог дать правильный ответ, и вы получите несколько баллов.
Ответы 1
Ссылочная переменная шаблона #address привязана к ngModel. Вы можете определить еще один, например #address1:
<input #address1 #address = "ngModel" ... >
и используйте его для доступа к элементу в коде:
@ViewChild('address1') public addressElement: ElementRef;
...
let inputElement = this.addressElement.nativeElement as HTMLInputElement;
Можем ли мы увидеть декларацию для
addressElement? Кроме того, находится ли входной элемент внутри циклаngForили внутри предка с условиемngIf?