How to use autoFormat?

[avimar]

one alternative is to use the formatNumber method (provided by utils.js) to format the number on blur. #346 (comment)
You want intlTelInputUtils.formatNumber() - see the wiki page linked above for more info. #346 (comment)

I tried calling it, but it didn't work:
Uncaught TypeError: intlTelInputUtils is not a function
... even though I loaded it: ,utilsScript: "bower_components/intl-tel-input/build/js/utils.js" and it works to verify if the number is valid, and I see in network in indeed loaded.

So, I can't reference it. I blew away the bower_components/intl-tel-input and reinstalled "intl-tel-input": "~8.0.0", ==> "version": "8.0.1", but it still doesn't work.

I'll ask more about how to use it once I can actually call it (it requires multiple arguments?). Ideas?

[jackocnr]

So it sounds like you're trying to use intlTelInputUtils as a function, but actually it's an object that contains some methods, one of which is formatNumber, so you need to call intlTelInputUtils.formatNumber() and pass in the arguments as per the utils.js wiki page.

[avimar]

Ah! OK, so I tried all the options. It seems passing in the country code doesn't matter... but you have to specify intl/ntl or it won't do anything.

console.log("Plain number: "+ intlTelInputUtils.formatNumber(telInput.intlTelInput("getNumber")))
console.log("number + iso2: "+ intlTelInputUtils.formatNumber(telInput.intlTelInput("getNumber"),telInput.intlTelInput("getSelectedCountryData").iso2))
console.log("number, null, INTL: "+ intlTelInputUtils.formatNumber(telInput.intlTelInput("getNumber"),null,intlTelInputUtils.numberFormat.INTERNATIONAL))
console.log("number, iso2, INTL: "+intlTelInputUtils.formatNumber(telInput.intlTelInput("getNumber"),telInput.intlTelInput("getSelectedCountryData").iso2,intlTelInputUtils.numberFormat.INTERNATIONAL))
console.log("number, null, NTL: "+intlTelInputUtils.formatNumber(telInput.intlTelInput("getNumber"),null,intlTelInputUtils.numberFormat.NATIONAL))
console.log("number, iso2, NTL: "+intlTelInputUtils.formatNumber(telInput.intlTelInput("getNumber"),telInput.intlTelInput("getSelectedCountryData").iso2,intlTelInputUtils.numberFormat.NATIONAL))

Plain number: +972588888888
number + iso2: +972588888888
number, null, INTL: +972 58-888-8888
number, iso2, INTL: +972 58-888-8888
number, null, NTL: 058-888-8888
number, iso2, NTL: 058-888-8888

Plain number: +12019999999
number + iso2: +12019999999
number, null, INTL: +1 201-999-9999
number, iso2, INTL: +1 201-999-9999
number, null, NTL: (201) 999-9999
number, iso2, NTL: (201) 999-9999

Is there a way to check if the user is currently in national mode or international mode? I can't find it in the docs. I'd like to try to autoFormat, but not to suddenly show or hide the country code on them.

[jackocnr]

Ah actually you raise a good point - if you just use getNumber then that actually calls intlTelInputUtils.formatNumber internally, so there's no need to do both! You can pass the format enum as the 2nd arg to getNumber instead - see the docs.

If you want to know if the user has entered a national or international number, you could just check if the input value starts with a plus.

Does that all make sense?

[avimar]

Well, that cleaned things up a bit.

1. the docs don't say that it formats it - in fact, it shows this which seems to mean it won't do any formatting, just if it has the +COUNTRY at the start:

Returns a string e.g. "+17024181234"

2. Wow, that's simple. So my code is now much simpler.. in riotjs, you'll have to set your selectors appropriately for your codebase.

var telInput =$(this.number);
telInput.blur(function() {
    if (this.number.value) {
        var currentFormat = (this.number.value[0]==="+") ? intlTelInputUtils.numberFormat.INTERNATIONAL : intlTelInputUtils.numberFormat.NATIONAL;
        this.number.value = telInput.intlTelInput("getNumber",currentFormat);
        }
    });