We are using angular version 1.2 and the whole solutions is dependent on 1.2. We want to implement ng-intl-tel-input but getting this error.

Error: ctrl.$validators is undefined
/lib/ng-intl-tel-input/ng-intl-tel-input.directive.js:20:11

If we commit the conflicted code then we are unable to validate the numbers.
Please reply ASAP.

This directive does not support type="tel" which fires the keypad keyboard.

Modify the following to fix this:

angular.module('ngIntlTelInput')
.directive('ngIntlTelInput', ['ngIntlTelInput', '$log',
  function (ngIntlTelInput, $log) {
    return {
      restrict: 'A',
      require: 'ngModel',
      link: function (scope, elm, attr, ctrl) {
        // Warning for bad directive usage.
        if ((attr.type !== 'tel' && attr.type !== 'text') || elm[0].tagName !== 'INPUT') {
          ...
        }
      }

Hey, just wondering how to get the ngMessages directive to display an invalid input

<div ng-messages="pInfoForm.phone.$error">
    <div ng-message="required">Phone number is required</div>
    <div ng-message="pattern">Phone number is invalid</div>
</div>

ng-message="pattern" doesn't seem to work when the number is invalid.

Thanks

Does not leave a space when you type. and place holder problem available. Error visual present in address

photouploads.com/images/269b61.png

i opened pull request #30
you not trigger the validation when the input length is 1,
and its save the state of valid for it when its invalid

can I and if yes, how can I use this lib with browserify?

Hi,
I am entering valid phone numbers its throwing invalid error.
How to add those can you please suggest

Please suggest.

Attaching screenshot for reference.

I can't able to import it in angular 1 es6

Hi I have installed this and its very good work i appreciate it, I was just digging into it,
I was wondering just how to differentiate country code and phone number from the model
any help is greatly appreciated.
Awaiting your reply.

I am using this plugin but using ng-intl-tel-input directive changes the default bootstrap layout. Can you tell me how to preserve the default layout.
Before

After

i want to get country code and country name from the input filed.

i am trying like this , but no luck
expect(element.intlTelInput('getSelectedCountryData').iso2).toEqual('gb');

Hi,

Could you please fix your bower.json from that :
"main": "src/ng-intl-tel-input.directive.js",
to that :
"main": "dist/ng-intl-tel-input.directive.js"

The lib breaks with tools like wiredep.

Thanks

It must be some typical problem, but not sure how to fix this. Here's the output:

> [email protected] jshint C:\Users\ksenk_000\Documents\GitHub\ng-intl-tel-input
> ./node_modules/jshint/bin/jshint *.js

'.' is not recognized as an internal or external command,
operable program or batch file.

npm ERR! Windows_NT 10.0.10240
npm ERR! argv "C:\\Program Files (x86)\\nodejs\\node.exe" "C:\\Users\\ksenk_000\\AppData\\Roaming\\npm\\node_modules\\np
m\\bin\\npm-cli.js" "run" "jshint"
npm ERR! node v4.2.1
npm ERR! npm  v3.3.9
npm ERR! code ELIFECYCLE
npm ERR! [email protected] jshint: `./node_modules/jshint/bin/jshint *.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] jshint script './node_modules/jshint/bin/jshint *.js'.
npm ERR! This is most likely a problem with the ng-intl-tel-input package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     ./node_modules/jshint/bin/jshint *.js
npm ERR! You can get their info via:
npm ERR!     npm owner ls ng-intl-tel-input
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\ksenk_000\Documents\GitHub\ng-intl-tel-input\npm-debug.log
npm ERR! Test failed.  See above for more details.
C:\Users\ksenk_000\Documents\GitHub\ng-intl-tel-input [master]> npm karma

Usage: npm <command>

where <command> is one of:
    access, add-user, adduser, apihelp, author, bin, bugs, c,
    cache, completion, config, ddp, dedupe, deprecate, dist-tag,
    dist-tags, docs, edit, explore, faq, find, find-dupes, get,
    help, help-search, home, i, info, init, install, issues, la,
    link, list, ll, ln, login, logout, ls, outdated, owner,
    pack, ping, prefix, prune, publish, r, rb, rebuild, remove,
    repo, restart, rm, root, run-script, s, se, search, set,
    show, shrinkwrap, star, stars, start, stop, t, tag, team,
    test, tst, un, uninstall, unlink, unpublish, unstar, up,
    update, upgrade, v, verison, version, view, whoami

npm <cmd> -h     quick help on <cmd>
npm -l           display full usage info
npm faq          commonly asked questions
npm help <term>  search for help on <term>
npm help npm     involved overview

Specify configs in the ini-formatted file:
    C:\Users\ksenk_000\.npmrc
or on the command line via: npm <command> --key value
Config info can be viewed via: npm help config

[email protected] C:\Users\ksenk_000\AppData\Roaming\npm\node_modules\npm

Is there an option to validate type of the input number?
The original library has GetNumberType method but it seems you didn't use it.

I noticed that with the current versions there are some problems when changing the country after inserting the number. In this case the model value is not updated.

To reproduce the bug:

1. type in telephone number
2. change country

I created a plunkr with the intl-tel-input version 9.0.0 and ng-intl-tel-input version 2.0.0 where you can reproduce the bug http://plnkr.co/edit/2zs6F5?p=preview

However if I use intl-tel-input version 7.0.2 and ng-intl-tel-input version 2.0.0 it was updating the value correctly http://plnkr.co/edit/Eh6Cip?p=preview

Therefore we have currently to use the older version. Would it be possible to fix this problem or does anybody know why this problem occurs?

Thx

As we required in the different section to set the different preferred countries, right now we create the extension directive to set the preferredCountries. Please add the following code in ngIntlTelInput directive.

if (attr.preferredCountries) {
var value = $parse(attr.preferredCountries)(scope);
if (angular.isArray(value)) {
ngIntlTelInput.set({ preferredCountries: value });
}
}

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.

We need a provider to allow for loadUtils configuration in the config phase of the module.

Inspired by https://github.com/revolunet/angular-google-analytics#example

Needs to facilitate loadUtils in https://github.com/Bluefieldscom/intl-tel-input#public-methods

Tried using following approach

module.config(appConfig);

    appConfig.$inject = [ 'ngIntlTelInputProvider'];

    function appConfig(ngIntlTelInputProvider) {

        ngIntlTelInputProvider.set({
            initialCountry: 'auto',
            geoIpLookup: function(callback) {
                callback('IN');
            }
        });
    }

Hi,

I am trying to use this directive for Angular Material. But seems it does not work at expected.

Can u please advise

Thanks

Thanks for greate library.
I am developing app in ionic for ios devices. Here I m able load the countries in dropdown but I am not able to scroll it into ios.

<div class="row" ng-show="!ctrlUser.IsPhoneNumberVarified">
            <div style="font-size:12px;width: 100%;" ng-class="{'has-success' : frmOTP.phoneNumber.$valid,'has-error' : frmOTP.phoneNumber.$invalid }">
        <input class='form-control' id="phone-number" name="phoneNumber" ng-model="ctrlUser.PhoneNumber" style='width:100%; display:inline;' type="tel" ng-intl-tel-input required>
       <div style="font-size:12px;" ng-show="frmOTP.phoneNumber.$error.phoneNumber || frmOTP.phoneNumber.$invalid">Note : Please provide mobile number with country code e.g +1,+44 etc.</div>
    </div>
 </div>

.iti-mobile .intl-tel-input.iti-container {
    top: 40px;
    bottom: 30px;
    left: 0px;
    right: 0;
    position: fixed;
    height: 300px !important;
    overflow-y: scroll !important;
}
.iti-mobile .intl-tel-input .country-list {
    width: 100%;
    height: 100%;
}

here scroller is not working

Hi guys, I've tried to find any information about how to set default-country property based on some property in controller, but suddenly I always get such error No country data for 'edit.countrysettings.regioncode' even if i set this property value to 'us'. So, are there any functionality to perform such actions?

I have following error, and I checked the order of loading jQuery and angular. It is fine(jQuery loads first) as I have used webpack provide plugin to use jQuery instead jqLite. Please see the console below

`TypeError: elm.intlTelInput is not a function
at Object.value (http://localhost:5000/app/common.js?029d67a20ccf00d48ee4:117052:18)
at Object.link (http://localhost:5000/app/common.js?029d67a20ccf00d48ee4:117075:27)
at http://localhost:5000/app/common.js?029d67a20ccf00d48ee4:25040:19
at invokeLinkFn (http://localhost:5000/app/common.js?029d67a20ccf00d48ee4:33727:10)
at nodeLinkFn (http://localhost:5000/app/common.js?029d67a20ccf00d48ee4:33128:12)
at compositeLinkFn (http://localhost:5000/app/common.js?029d67a20ccf00d48ee4:32413:14)
at compositeLinkFn (http://localhost:5000/app/common.js?029d67a20ccf00d48ee4:32416:14)
at nodeLinkFn (http://localhost:5000/app/common.js?029d67a20ccf00d48ee4:33123:25)
at compositeLinkFn (http://localhost:5000/app/common.js?029d67a20ccf00d48ee4:32413:14)
at nodeLinkFn (http://localhost:5000/app/common.js?029d67a20ccf00d48ee4:33123:25)

<input type="{{type}}" ng-intl-tel-input="" ng-blur="onBlur()" ng-change="onChange()" ng-model="value" ng-model-options="ngModelOptions" ng-disabled="disabled" ng-readonly="checked" "="" class="ng-pristine ng-untouched ng-valid">`

jqLite
VM4267:1 Uncaught ReferenceError: jqLite is not defined(…)(anonymous function) @ VM4267:1

$
$(selector, [startNode]) { [Command Line API] } angular.element ( selector, context ) { // The jQuery object is actually just the init constructor 'enhanced' // Need init if jQuery is called (just allow error to be thrown if not included) return …

i am trying to implement ng-intl-tel-input plugin but dropdown not loading with images and phonenumbers, no erros are showing.. please help

With jQuery 3.1.1, first using ng-intl-tel-input 1.4.0 and then 2.0.0 the error is

intlTelInputUtils is not defined. Formatting and validation will not work.

Error is the same with "intl-tel-input": "~9.0.14" and11.0.4

Your demo examples have a mask on the input - I'm not seeing where you set this or configure it? There are no masks being applied to my inputs.

Please let me know!

Hey
We've all noticed that bower is losing its popularity for the better use of npm.
I think that porting a version of this module as npm dependency would be nice :)

What do you think?

Hi every body, can you tell me why on windows phone 10 when i want enter phone number i always have double digits.
on ios, android, pc, mac i don't have this problem but problem arrive only windows phone 10 with edge.

Thank for your help or your answer.

The issue appears to be that the flag images are not present in the production site (post grunt build), but are available in the development site (grunt serve, for example). This might be related to missing bower statements, requiring manual css stylesheet and js inclusion in index.html:

<link rel="stylesheet" href="bower_components/intl-tel-input/build/css/intlTelInput.css" />

<script src="bower_components/intl-tel-input/build/js/intlTelInput.min.js"></script>
<script src="bower_components/intl-tel-input/lib/libphonenumber/build/utils.js"></script>
<script src="bower_components/ng-intl-tel-input/ng-intl-tel-input.module.js"></script>
<script src="bower_components/ng-intl-tel-input/ng-intl-tel-input.provider.js"></script>
<script src="bower_components/ng-intl-tel-input/ng-intl-tel-input.directive.js"></script>

Development:

Production:

Searched for you in bower, can't find this library. Is it possible to add this so my team can keep all our external dependencies centralized?

TypeError: elm.intlTelInput is not a function
at Object.create.init.value (http://localhost:3001/ng-intl-tel-input/dist/ng-intl-tel-input.js:21:17)
at link (http://localhost:3001/ng-intl-tel-input/dist/ng-intl-tel-input.js:44:26)

Any help is much appreciated

The formatting of Canadian phone numbers is obsolete. It uses a (999) 999-9999 format, but I live in Canada and we no longer use this format since many years. The correct format would be 999 999-9999 (without parentheses).

Even the canadian government website says the format with parentheses is obsolete. See this page.

Relevant text in webpage:

Canadian telephone numbers are written NXX NXX-XXXX and can be preceded by 1 or +1. A hyphen should separate the three-digit and four-digit blocks of the local number but otherwise spaces are used. Parentheses around the area code (NXX) may still be used but are becoming obsolete.

EDIT
Since the webpage has been last updated in 2002, I think it is time to make the move and remove the parentheses.

Build ddbb11a is invalid...

I have the input binded to a model data like this :
<input class="line" name="phone" ng-model="form_data.phone" type="text" required ng-intl-tel-input />
When the data is set from the model (e.g. +32 474 74 74 74 - Belgian number). If I just change the country (e.g. France) and then I log the object form_data (without doing anything else), the phone value is not updated. (still + 32)
If I now just remove a 4 and rewrite it then log the object form_data, then it displays the +33 of France in the example.

Hi,
I noticed that there's no filter for displaying formatted phone number outside an input. Here's what I did, maybe someone with more knowledge of intlTelInput could do something better:

.filter('phoneNumber', [function() {
        var odv = $(document.createElement("input"));
        odv.intlTelInput();
        /**
         * numberFormat = ["E164", "INTERNATIONAL", "NATIONAL", "RFC3966"]
         */
        return function(input, numberFormat)
        {
            if (numberFormat == null) {
                numberFormat = "NATIONAL";
            }
            odv.val("+" + input);
            return odv.intlTelInput("getNumber", intlTelInputUtils.numberFormat[numberFormat]);
        };
    }])

When setting the value of the model in advance, the value isn't parsed in to the tel-input element automatically (as it usually is with 2-way data binding).
HTML <input type="text" class="form-control" id="twoway" name="twoway" ng-model="twoway" ng-intl-tel-input>
JS $scope.twoway = "+61430112233";

In this example I'd expect the directive to pick up the existing model and parse it (detect the +61 = Australia country code) to display the flag and number, but instead it's only displaying an empty input field with the default country code selected.

👍

Hi Guys,

When you click the flag and input the phone number, the format is shown as {flag}{phone number}.
But when we dynamically set the value, the format is {flag}{+dial code}{phone number}

Any workaround for it?
Demo here:
https://plnkr.co/edit/J3b8Z8KBHIoLBQ7QLrnb?p=preview

Btw, the example index.html has the title wrong for the component. it is ng-intl, not ng-intel !!!

Is there a way to have the phone number extension included in the model? Right now when I enter a phone number with an extension like 9722481234x111, the model is only updated with the +19722481234 portion. I know I can still get it through jQuery using $("#phone").intlTelInput("getExtension");, but I was hoping for a more "angular" way.

How to get in ngModel the value +849... instead of just 849...
I was googled but couldn't find any solution yet. Could you guys please help me out ?

Hi,

When I type a french phone number like "06 xx xx xx xx", the output is valid, but if the number begins by "07 xx xx xx xx", the model value seems to be undefined.

Tested on the demo page:

Thank you!

update the country is not possible any idea ?

eg
Value in Model = " 91 9429901324"
Value in View = "+919429901324" (Formatter does that magic) but that isnt reflected back in model.

Suggestion :
Can we add these two lines so that when formatter function is called it also updates value in model?

ctrl.$setViewValue(elm.intlTelInput('getNumber'));
ctrl.$commitViewValue();

It seems like if I set the model (in code) for the field say $scope.phone to "(360) 384-1820" when it's in the field it ends up being "+(360) 384-1820" and then it reads it as +36 or a Hungary number. I tried setting the initial country on the field and that doesn't seem to fix it. But if the field is empty I make sure it's on US or +1 and then paste "(360) 384-1820" into the field it's fine and no +1 is added or no + is displayed before it. I could of course add a +1 to the value I am setting the model to, but this really seems like a bug or me doing something wrong.

The code in your example is code from about a year ago. The jQuery project has been updated several times. The current code you have looks to reflect those changes.

Also, there is nothing in the readMe to suggest that one needs to also npm install intlTelInput/use their utils.js/use their css and images/use their minified js file. I figured that out by looking into the open issues.

There is also an issue with using the utils file for me. Gulp wraps up my node modules into a single app-dependencies.js file. This means that I cannot properly path to the utils file on my end when I'm using the provider stuff you have.

Just trying to help square it away! I know the Angular 1 community is kind of dying off.

Text inputs without type="text" deceleration are not treated as valid inputs.

Reason:

• Browsers set inputs without type deceleration to "input" by default.
• Minifiers often drop type="text" decelerations.

Example:

<input name="tel" ng-model="tel" ng-intl-tel-input>

This is wrong sample:
<input type="text" ng-model="model.tel" ng-intl-tel-input data-default-country="gb">

After I saw you code inside directive it should be:
<input type="text" ng-model="model.tel" ng-intl-tel-input initial-country="gb">