How to format number using intl-tel-input?

Question

I have included intl-tel-input js & css library in my index.html:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/14.0.6/css/intlTelInput.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/14.0.6/js/intlTelInput.min.js"></script>

I have another file called app.js which inside of it I format number while user is typing in a textbox:

window.intlTelInputGlobals.loadUtils(_TEL_INPUT_UTILS).then(function(x, y){

var pn = $("#phone_number")[0];
var iti = intlTelInput(pn,{
    nationalMode: false,
    initialCountry: 'US'
})
var handleChangeVerification = function() {
if(iti.getNumber() ){
    iti.setNumber(iti.getNumber());
}};
pn.addEventListener('change', handleChangeVerification);
pn.addEventListener('keyup', handleChangeVerification);

The variable _TEL_INPUT_UTILS refers to the utility script of intl-tel-input after it's loaded I try to format number in my text box.

This code resides in:

$(document).ready(function(){
   //...
})

Now I have a code in app.js that is outside of loadUtils and I want to format that number in a variable.

When I call the same loadUtils, I get an error of:

jQuery.Deferred exception: window.intlTelInputGlobals.loadUtils(...) is null my_scpecific_funcation@webpack:///./src/app.js?:258:13

The question is that how can I format the number inside of a variable? Do I need to use loadUtils each time? Is there a better way for the whole process?

Answer 1

The thing I didn't know about was that when you use loadUtils, It will be loaded and you will have access to it.

So I used the below code without further ado:

intlTelInputUtils.formatNumber(my_number_var, null, intlTelInputUtils.numberFormat.INTERNATIONAL);