getElementById - ion-input

Ionic Framework ionic-v3
1

I’m trying to implement the google places API in the ionic form. here’s the code:

onPageLoaded() {
var input = document.getElementById(‘autocomplete’);
var options = {componentRestrictions: {country: ‘us’}};
new google.maps.places.Autocomplete(input, options);
}

but this is what i get: InvalidValueError: not an instance of HTMLInputElement

2

I have the same problem :tired_face: !! any ideas of how to fix this !

3

Try:

ngAfterViewInit() {
    var input = document.getElementById('autocomplete');
    var options = {componentRestrictions: {country: 'us'}};
    new google.maps.places.Autocomplete(input, options);
}
4 Likes
5

I’m having the same problem.

<ion-input id="autocompleteInput" type="text" [(ngModel)]="data.location"></ion-input>

Either on PageLoaded or on ngAfterViewInit, the problem is that getElementById is returning a TextIput (from an ion-input) not an HTMLInputElement (regular input) as Google API is expecting.

I have no idea how to either cast it, or get the inside the .

6

+1 having the same problem

1 Like
7

Ok, this may not be the best solution, but it works…

var input = document.getElementById('autocomplete').getElementsByTagName('input')[0];
2 Likes
8

@nanexcool Unfortunately does not work for me, I get an error on getElementsByTagName:

TypeError: Cannot read property ‘getElementsByTagName’ of null

1 Like
9

If you do it like this it should work:

ngAfterViewInit() {
    var input = document.getElementById('autocomplete').getElementsByTagName('input')[0];
    var options = {componentRestrictions: {country: 'us'}};
    new google.maps.places.Autocomplete(input, options);
}
3 Likes
10

Using @joshmorony’s solution should work.
The ion-input element in a template creates more than just an input element when it is rendered, which explains why people are getting the “not an instance of HTMLInputElement” error.

I’m wondering though, if there are any other ways of getting a component’s elements from the angular framework rather than searching the DOM.
I’m worried about more complex pages that use components multiple times, potentially resulting in duplication of an ID.

1 Like
11

So a better way to do this now would be to use a local variable rather than searching the DOM. You can give something a local variable like this:

<div #myElement></div>

and then grab it using @ViewChild:

import {ElementRef, ViewChild} from '@angular/core';

@ViewChild('myElement') myElement: ElementRef;

constructor(){

}

Now a reference to the element will be available throughout the class. In this case you would need to do:

ngAfterViewInit() {
    let options = {componentRestrictions: {country: 'us'}};
    new google.maps.places.Autocomplete(this.myElement.nativeElement, options);
}
3 Likes
12

I was having the same issue and I put the getElementByID in a function and attached to the element using the (load)=“function()” and that seems work.

13

@joshmorony please can you advise on how this can be done in es6? I’m not using typescript :slight_smile:

1 Like
15

Hi guys, I recommend use the HTTP RestAPI, and then in the function called by ng-change run a get request for that API.

There are a lot of workaround to get up and running this, but I think that calling directly the API is more clear and maintainable.

16

Thanks that’s what I was looking for.

17

thank you joshmorony your solution solved my problem

18

It is strange because for me this.myElement is a TextInput object, and this.myElement.nativeElement is undefined. I am paying attention to your ngAfterViewInit as well.

19

@clarkdrimlike
I have the same problem. Did you find a solution ?
Someone as a solution using @joshmorony’s with <ion-input> ?
Thanks.

20

I gave the <ion-input> an id of id="locationSearchInput"

Then I grabbed the actual input like this which seems pretty dirty

const input = document.getElementById('locationSearchInput').getElementsByTagName('input')[0];

And used it with Google Places for example.

      new google.maps.places.Autocomplete(input, {
        types: []
      });
21

Here is how i got it working
import { Component, ViewChild, NgZone, ElementRef } from ‘@angular/core’;

export class MapPage {
@ViewChild(“search”, { read: ElementRef })
public searchElementRef;

constructor(){}

autocomplete() {
… blabla

    let inputField = this.searchElementRef.nativeElement.getElementsByTagName('input')[0];
    let autocomplete = new google.maps.places.Autocomplete( inputField, {
      types: ["address"]
    });

}
}

22

<ion-input type=“number” id=“amtRcv” [(ngModel)]=“dataMaster.my_Rcvpmt” (ionChange)=“onChange($event)” class=“clix-input-1”>

setAmount(){

var my_Rcvpmt1 = document.getElementById(‘amtRcvt’).getElementsByTagName(‘my_Rcvpmt1’)[0];

alert (‘my value2:’+ my_Rcvpmt1 );
}

i want to get value from this ion-input field but

I am not getting value “undefined”

can anybody help me please