getNumber() doesnot work

[kotaibahRed]

Expected behaviour

return full number

Actual behaviour

return null

Initialisation options

var iti = window.intlTelInput(input, { // any initialisation options go here initialCountry: "LB", nationalMode: true, utilsScript: "{{asset('js/int-phone-num/utils.js')}}", });

[jackocnr]

If you can find the minimal set of code that reproduces the problem and put that in a CodePen, then I'd be happy to take a look. Here is an example pen with the plugin up and running - feel free to fork this if it helps.

[asologor]

@kotaibahRed I encounter the same behavior if utils script is not loaded. Check the window.intlTelInputUtils object in your browser console to ensure that utils were loaded.

[jackocnr]

Thanks @asologor. Yes as per the readme, getNumber requires the utils script to be loaded to work. Closing this for now, but let me know if you have any questions.

[GoudekettingRM]

I just tried using the getNumber method as well, but am running into the same problem. I defined my input options like this:

const intlPhoneInputOptions = {
  customContainer: 'inputField__text',
  utilsScript: 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js',
};

And then in my class I initialise the input like so (this.input is just a selected inputfield from the dom):

this.intlInput = intlTelInput(this.input, intlPhoneInputOptions);

I subsequently add this to the input to check for when the country changes:

    this.input.addEventListener('countrychange', () => {
      console.log('country changed');
      console.log('this.intlInput.getNumber()', this.intlInput.getNumber());
    });

I do see the strings being logged, but the this.intlInput.getNumber() remains empty.

Edit: Also, when I check window.intlTelInputUtils, this is still undefined. What am I doing wrong that the utils are not loading properly?

[GoudekettingRM]

Alright, I got it to work by not using the cdn, but moving the utils script to a public folder in my app!

[rod-dd]

@GoudekettingRM this idea helps me. thanks.

For the sake of everybody,

Here is my case,

There are existing invalid phone numbers on my resource, and i want to update data. the wrong phone number displayed ( as wrong number still ) but when i try to submit the form. It allows to get in ( im not expecting on this behavior, it should validate ), as I investigate the value for .getNumber() is empty. So when I ran the .isValidNumber() its turns out to be invalid. I tried to implement your idea ( pre loading the util scripts on the head ), solves the issue.
I do suggest that we should not be including the utils script as part of the initialization, unless you have no choice.