utilsScript inconsistent behaviour

[alejandromagnorsky]

I'm using it in this way:

ngIntlTelInputProvider.set({
    initialCountry: 'au',
    separateDialCode: true,
    utilsScript: 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/10.0.8/js/utils.js'
});

But for some reason, sometimes the utilScripts don't load limiting the format features of the plugin.

[MathieuDebit]

Did you find a solution or not? I may experiencing the same issue.

[alejandromagnorsky]

No, I just load the utils.js in the index.html to make sure it always work.

[angelika]

I also have issues with this. If I reload a page the formatting works fine, but if I navigate to the same page it doesn't. I tried loading the file in the index.html as well, but it makes no difference.

[paridao]

I also have the same issue. Reload a page the formatting works fine, but if I navigate somewhere else and come back to the same page it doesn't. I'm using angular 1.5, components and ui-router. Pages not reload on change state. I tried to move utils.js somewhere else but anything happened. Did someone figure out? Thank you

[paridao]

I fixed by myself, the problem is inside the directive formatter, it sets the international number value for the intl-tel-input and in case utils.js is enabled (to enable it needs only to put the script in the provider, not suggested to put it in the index.html cause to the size), it call the utils formatter that sets the jquery.val with the formatted value. The problem is that angular sometime do not detect the change and not update. In order to accomplish the change i add a line of code below the formatter, I commented return value and I replaced that with a call to utils, maybe need to check first for enbled utils.js but for me it works fine. The code of $formatter: // Set input value to model value and trigger evaluation. ctrl.$formatters.push(function (value) { if (value) { if(value.charAt(0) !== '+') { value = '+' + value; } elm.intlTelInput('setNumber', value); }
//return value; let number = intlTelInputUtils.formatNumber(value, elm.intlTelInput('selectedCountryData').iso2, intlTelInputUtils.numberFormat); return number;
});

[amc1804]

paridao, thanks for that tip. I think there's a simpler way to do it. Right after calling SetNumber, insert:

value = elm.val();

By the way, inserting '+' in front of value before calling setNumber is problematic for me, so I've had to comment out that code. I have a bunch of legacy phone numbers in my database with no country codes. I'd rather let intlTelInput take its best guess or assume the initial country, rather than have it misinterpret the first few digits as a country code (which is almost certainly wrong).