getNumber() returns an empty string.

[ErenMMS]

Plugin version

v23.1.1

Steps to reproduce

1. Select any country
2. Enter a phone number
3. Observe 'getNumber()' function

Expected behaviour

getNumber() function should return the number in international format

Actual behaviour

getNumber() function returns an empty string

Initialisation options

Using 'utilsScript'

Styles and Scripts

Angular.json ////
"styles": [
              "src/styles.scss",
              "node_modules/intl-tel-input/build/css/intlTelInput.css"
            ],
"scripts": [
              "node_modules/intl-tel-input/build/js/intlTelInput.min.js",
            ]

Codes

IntlTelInputComponent ////

import { Component, OnInit } from '@angular/core';
import intlTelInput from 'intl-tel-input';


@Component({
  selector: 'app-intl-tel-input',
  template: `
    <input id="phone" type="tel">
  `,
  styleUrls: ['./intl-tel-input.component.scss']
})
export class IntlTelInputComponent implements OnInit {

  ngOnInit() {
    const input = document.querySelector("#phone") as HTMLInputElement;

    const iti = intlTelInput(input, {
      initialCountry: "us",
      nationalMode: true,
      utilsScript: "node_modules/intl-tel-input/build/js/utils.js"
    });

    const handleChange = () => {
      let number;
      let country;
      if (input.value) {
        number = iti.getNumber()
        country = iti.getSelectedCountryData()
      } else {
        number = "Please enter a number";
      }
      console.log('number', number);
      console.log('countryData', country)
    };

    input.addEventListener('input', handleChange);
  }
}

getSelectedCountry() function works fine, it returns the "SelectedCountryData"

[jackocnr]

This can happen if the utilsScript is not loading properly - can you check in your browser dev tools, network tab, to see if the utils.js script is loading successfully, before you try typing something in the input?

[ErenMMS]

This can happen if the utilsScript is not loading properly - can you check in your browser dev tools, network tab, to see if the utils.js script is loading successfully, before you try typing something in the input?

Yes, it's not loading, i can't see it in network panel

[jackocnr]

Hmm well there should at least be a failed request there, if you've initialised the plugin with the utilsScript option? Try refreshing the page with the devtools network tab open.

[ErenMMS]

Hmm well there should at least be a failed request there, if you've initialised the plugin with the utilsScript option? Try refreshing the page with the devtools network tab open.

There is no request either, in below code i write the utilsScript if thats what you're asking about initializing.

const iti = intlTelInput(input, {
      initialCountry: "us",
      nationalMode: true,
      utilsScript: "node_modules/intl-tel-input/build/js/utils.js"
    });

[jackocnr]

Ah, this will be the problem. You have passed a relative path to the utilsScript option, which wont work. Instead it requires a full URL that will load your hosted utils.js. The easiest thing to do here is just to load it from a CDN, e.g. pass "https://cdn.jsdelivr.net/npm/[email protected]/build/js/utils.js"

[ErenMMS]

Ah, this will be the problem. You have passed a relative path to the utilsScript option, which wont work. Instead it requires a full URL that will load your hosted utils.js. The easiest thing to do here is just to load it from a CDN, e.g. pass "https://cdn.jsdelivr.net/npm/[email protected]/build/js/utils.js"

Ok it's working now thank you so much.