mareczek / international-phone-number Goto Github PK

Guys from Rackspace did similar wrapper ng-intl-tel-input. It's 1.4 only.

Collaborating and broadening the supported versions would be good!

When using nationalMode I need to store the country code as well as the number.
I played with the modified file from 3dd13 (See issue #10) and was able to retrieve the country code and then save that to the db, like "+18005551212". However, when the number is retrieved for editing, it is displayed in the input field as
+1[object Object]

How should I set the value of the input field? Here is what I've got:

<input international-phone-number
                                       preferred-countries="us"
                                       default-country="us"
                                       national-mode="true"
                                       utils-script="/static/bower_components/intl-tel-input/lib/libphonenumber/build/utils.js"
                                       responsive-dropdown="true"
                                       class="form-control"
                                       type="phone"
                                       id="contact_phone"
                                       name="phone"
                                       type="tel"
                                       ng-model="rs.contact_phone"
                                        />```

And in the controller I'm just getting the "rs" object from the db, in which contact_phone = "+18005551212".
It seems like there needs to be some way of extracting the country code from the number string and setting the value of the pulldown.

How am I supposed to do this?

Alternatively, I could store/retrieve the country code separately from the number, but I would still need a way to set the country code value/flag in the pulldown.

We are using your directive as

<input value="+1" type="tel" international-phone-number auto-hide-dial-code="false" class="phone" name="phoneCountryCode" ng-model="phoneCountryCode" required>

When we switch from 0.0.11 version to 0.0.13, the model bingeing no longer works. We always get empty phoneCountryCode on form submit.

how to use this international-phone-number in editable-text or editable-tel in xeditable in angular js

Since version 0.0.16, the binding seems not to be initialized properly when a number is first set via ngModel. I can easily reproduce the problem:

0.0.15 : http://plnkr.co/edit/0LvSD4GEgmnlnlUk4RZY?p=preview
0.0.16 : http://plnkr.co/edit/DOzjJXGAbdlQVSHa2ij6?p=preview

Am I doing something wrong here ?

'internationalPhoneNumber' directive declaration not wrapped in array. It causes renaming of dependencies (a instead of $timeout) in minified version

... .directive("internationalPhoneNumber",function(a) {...

We should have an options attribute in order to customize default options, which then can be overwritten by other attributes.

Priorities:

1. Other attributes
2. options attribute
3. Default options (set in international-phone-number.js:32)

I have my template like this

    <div class="form-group">
        <input
            ng-if="LoginController.selected === 'email'"
            type="text"
            class="form-control"
            ng-model="LoginController.username"
        />
        <input
            ng-if="LoginController.selected === 'phone'"
            type="text"
            international-phone-number
            default-country="cn"
            preferred-countries="cn"
            ng-model="LoginController.username"
            class="form-control"
        >
    </div>

every time I switch LoginController.selected from phone to email
threre will be one more

<div class="intl-tel-input"></div>

added after the first input

and the class added on directive will be inside the div wrapper, which cause a little difficult to style the whole element

I have a separate control for country so I want to one way bind selected country or just call selectCountry method.

Can this library do this?

Hi

I have been playing around with the plunker you setup and i cant seem to get ng-model to parse properly - maybe i am missing something.

When i place value="+27827811022" into the second input it parses it correctly. Updates the flag to the correct country and the model is updated correctly. However when i place the exact same text only in the model phone, it does not update the flag correctly.

See the updated plunkr

http://plnkr.co/edit/jXN5vOuNxoCkG6t506Mu

sorry, not an issue, but a (hopefully quick) question... how do you separate & grab the country code from the ng-model set on the directive, especially if users use the dropdown to select their country? similarly, if enabled, how do you separate the extension?

plunkr (based on @skfd's): http://plnkr.co/edit/KacViEe1yN9Tc5UPJgks

(lmk if there's a more appropriate forum to ask these types of questions, and I'll post there instead)

I get by default this value 01 00 in the input

Some time I need to pass the country selected along with the phone number. What's your though on that? I could submit a pull request but I need to make sure that you find it would be useful. An example of the markup could be:

<input name="mobileNumber" type="text" class="form-control" international-phone-number number-type="MOBILE" ng-model="loginForm.mobile_number" country-model="loginForm.country">

There were a number of fixes made that were never technically "released" - in fact the js and minified js code in the releases folder is over 6 months old.

The code compiled from CoffeeScript lose the mangled dependencies.

Currently:

.directive('internationalPhoneNumber', function($timeout) {

Should be:

.directive('internationalPhoneNumber', ['$timeout', function($timeout) {

This should be mandatory.

Thanks for the package! Please publish it on npm so that people who use CommonJS/Browserify can install it with npm install international-phone-number.

When I set an attribute utilsScript="test/fake/path.js" on my phone form field, the script still attempts to load the the bower_components/.../utils.js script. In my app, I load the utils.js manually in the head of my index.html, so I had to remove this piece entirely to make everything kosher.

  element.intlTelInput(options);
  if (!options.utilsScript) {
    element.intlTelInput('loadUtils', 'bower_components/intl-tel-input/lib/libphonenumber/build/utils.js');
  }

The way this is coded is very undesirable. Most people will not be using the default bower_components folder, so you are making big assumption in your code here. I would not want my directive loading a *.js file. But additionally, int-tel-input already handles this scenario, so you don't have to cover it in the directive.

We are using your directive as

<input value="+1" type="tel" international-phone-number auto-hide-dial-code="false" class="phone" name="phoneCountryCode" ng-model="phoneCountryCode" required>

When we invoke for e.g. $scope.phoneCountryCode = "+7" (via appropriate $scope$apply call) from controller code the selected flag does not get updated and US is still selected.

If we change the tag to

<input type="tel" international-phone-number auto-hide-dial-code="false" class="phone" name="phoneCountryCode" ng-model="phoneCountryCode" required>

by removing value attribute, the flag get's updated properly, but in this case we get a validation error on form submit.

Reproducible on 0.0.11 version of the library.

I am trying to implement phone number validation.
I see that its part of the original jquery plugin http://jackocnr.com/lib/intl-tel-input/examples/gen/is-valid-number.html.
But I am not sure if its supported in angular? if it is could you provide an example please.

Tracked down bug where field would have red outline (due to class of ng-invalid), even thought the phone number was a valid international number. I tried a whole bunch of things, not sure what I ended up changing, but this works:

        //pass field value to model
        ngModel.$parsers.push(function (value) {
          if (value) {
            ngModel.$setValidity('invalidIntlTel', element.intlTelInput("isValidNumber"));
          } else {
            //ignore tel validation when field is blank
            ngModel.$setValidity('invalidIntlTel', true);
          }
          return value ? value.replace(/[^\d]/g, '') : '';
        });

To reproduce the bug: click the form field to start typing a number, but instead of typing, erase the area code. Blur cursor out of the field, then focus the field again, this time type a valid number. When you blur, the class will be "ng-invalid" even though your number is valid.

The code in /releases/international-phone-number.(min.)js has not been updated with the latest changes in the source code.

So I am not sure if it's just me, but I can't find out how to use the selected Country code.
I don't really get it, I mean why can a user select a country while it won't be even used/saved?!

So I want to use this repository but really need this to work, thanks in advance, like to hear from u asap.

I am having some issues with binding the input to a model. Please provide a simple plnkr examples so it will be helpful for beginners like me to kick-start.

Thank you ...

Hey,

I'm curious why you wrap some bits of functionality in a $timeout callback.
Thanks.

Hi -- I am using it in a form in which the phone number is not required, it is optional.

However, the phone number apparently is required, regardless of the presence of "required" or ng-required="false".

I expect form.$invalid to be false (if all the other required fields are filled in), but the form is always invalid unless there is a valid phone number entered.

What should I do to make the phone number optional?

Shouldn't phone number +1 be invalid even if it is not required? Bare dial code is just garbage.

I am quasi certain that I am the cause of the problem :-) Yet no matter what I try and setup, I keep on running into undefined is not a function which points to the line element.intlTelInput(options);
Would you have a basic example that I can work from to see where I am making the mistakes?

thank you!

The directive was loading before the value of the input field was populated by the data I provided it. I believe this to be a problem when running the directive in an ng-repeat

it can easilly be fixed by wrapping the directive in a 0ms $timeout - which will queue the loading until after the DOM has finished rendering.

I have limited experience with making pull requests - is this something you can take a look at?

Thank you in advance!

How do you use this option? Right now it just sets the option as string to the underlying plugin which doesn't work?

I get this error when i try to use the directive : 'element.intlTelInput is not a function'.

Do you have any suggestions ??

Hey Mareczek,

Nice work on this! Do you happen to have a working example implemented in html/css/js you could post?

I followed the instructions:

• bower installed
• dependency added

And I'm getting the following error in the console:

TypeError: undefined is not a function
at link (http://192.168.0.3:8100/js/services/international-phone-number.js:44:17)

This is the function in question:

element.intlTelInput(options);
if (!options.utilsScript) {
element.intlTelInput('loadUtils', 'bower_components/intl-tel-input/lib/libphonenumber/build/utils.js');
}

When passing a default/init value to the phone form field, it will not have the right masking. In my app, I've expanded international-phone-number with this bit of code to apply the int-tel-input masking:

  //after directive init, apply masking to default data in tel field
  $timeout(function () {
    if (element.val()) {
      element.intlTelInput("setNumber", element.val());
      scope.$apply(read);
    }
  });

And on destroy, you can also destroy the intlTelInput() instance:

  element.on('$destroy', function () {
    element.intlTelInput('destroy');
    element.off('blur keyup change');
  });

@mareczek I am trying to set the phone number that accordingly changes the flag using setNumber, but it still show the +1. I try to set this in my controller, it not working in my edit page. Please help me.$("#mobile-number").intlTelInput("setNumber",myVal) in the controller.

Hi Mareczek,

I have a form where I'm trying to edit phone number with international-phone-number element. After loading form I'm able to see data in input element (it contains valid phone number), but form has form.$invalid = true.
Focus this element makes form.$invalid = false.

Could you please look at this case? Thanks in advance.

Hey, Thanks for implementing this!... I was looking to do it this week and was stumped since never implemented a jquery plugin like this as a directive.

Just a suggestion as we use this plugin on our non-angular site and Im moving to use it in our angular site...

So this jquery plugin attempts to give nice placeholder text and nice formatting via that util.js library.
But in some countries the formatting provided by util.js is a bit loose, like the day phone # could have 10 digits which is what util.js may provide, but the cell phone # in that country could have 11. so it breaks the formatting. But util.js shows dayphone formatting which is fine since it has to pick 1 format, prob the most popular format in the country.

Imagine the formatting is '## #### ####' and you enter '12 3456 7890'. all is well.
but if you enter '12 3456 78901' it breaks the formatting and the plugin becomes a free-form field and instead shows up as '12345678901', which is fine.
But if you submit my form, Im guessing you may implemented validation in angular, checking if the util.js validation says its an invalid field, and then if so declare it as invalid. The result of that is the typed phone # not put into the model (the model is undefined for me if i try to enter alternate cellphone formatting like above).
Because of that, I cant get passed the contact form since that field is required.
Is there maybe an directive attribute you can pass saying not to worry about formatting validation in angular?
We can easily look at the raw model value '12345678901' in our database and figure out how to call the user which is better than not being able to get passed the contact page at all so think maybe this kind of attribute would be useful for others.

Thanks,
Arian

Something like validate-phone-formatting below:

<input
                  international-phone-number 
                  validate-phone-formatting="false"
                  national-mode="true"
                  ng-model="phone.textAnswer"
                  ng-required="phone.required"                  
                  type="tel"
                  name="{{phone.question_id}}"
                  id="{{phone.question_id"
/>

Hi,

Thanks for this amazing directive. It saves me hours of work!!

Three details, I think will improve the directive.

1. in the second parser you do:

     delete ctrl.$error['international-phone-number']

I think is important to call:

            ctrl.$setValidity('international-phone-number', true);

to clear the $invalid state of the input.

2. In the second parser too, you are returning the value received. I think will be better to return:

return element.intlTelInput("getNumber")

To provide the entire international number.

3. To maintain the standard angular way of handling the validation, I think it will be better to return undefined if it not valid in the parser. Something like:

            if (validity){
              //return value;
              return element.intlTelInput("getNumber")
            }else{ 
              return undefined;
            }

I hope it helps,

Best Regard,

Roberto

Hello!

The latest version of intl-tel-input is 7.1.1, however, your module requires ~5.1.0. Is there a compatibility issues with newer version? Are you planning to update it?

Thank you.

Hello!

Thank you for this great module!

However, consider this code:

<input
    type="text"
    ng-model="formData.phoneNumber"
    international-phone-number
    required
>

$scope.formData = {
  phoneNumber: '+71231234567'
};

For some reason the ngModel of the input field is treated as $invalid initially. However, if I click into the input field, it is updated and state becomes correct.

Please advise, thanks )

It would be cool to allow 2-way binding of preferred-country field.
The reason why i suggest adding this is because our web app has a initial Contact Info page where we collect this, then a 'Confirm Contact Info'. Before when we arrived on the 2nd page, it would not populate the flag dropdown correctly. So what i did was setup 2 way binding with preferred-country, and then store that in our model when the dropdown changes so i can populate it in the future (even when they come back to our page by saving the model value to a cookie)

I think here is the applicable code if interested.

      scope: {
        ngModel: '=',
        defaultCountry: '='
      },
  ...
        element.on('blur keyup change', function(event) {
          var user_country = element.parents('.intl-tel-input:eq(0)').find('.country-list li.active').attr('data-country-code');
          scope.defaultCountry = user_country; //not sure if setting it this way is optimal in here
          return scope.$apply(read);
        });

Could you please add a LICENSE file to clarify things? Thanks!

This line is causing us problems here:

https://github.com/mareczek/international-phone-number/blob/master/src/international-phone-number.coffee#L60

We do minification and combine all our bower component js files together in a vendor.js file, and this line here then links to a file that ends up non-existent. As a result, our deployment breaks. You could possibly replicate the build step in intl-tel-input and then access the file directly?

I really like this angular module and what it does, but without this fix, we'll have to remove it from our upcoming release. :(

Mareczek,

Posted this but you may not have seen it. Will you be able to look into this?

I have done some more testing (of the "required" behavior) and now it's behaving differently, but not quite right, still. There seems to be some kind of interaction with other input elements.

There are 3 inputs, 1 textarea and 1 international-phone-number element.

The elements that are required (or ng-required) no longer seem to affect the value of form.$invalid.

form.fullname.$invalid can be true, but form.$invalid is still false. I think if a form element is invalid the form should also be invalid itself.

For that reason, the blank form starts as valid, since the required fields are ignored.

A focus + unfocus on the international-phone-number element makes form.$invalid = true. It shouldn't!

If required fields are filled in and I focus + backspace on the international-phone-number, then form.$invalid = false, but it should be true.

Could you please take another look at this? Really appreciate your help.

Hello , am new to angularjs and ionicframework I have tried to set this directive in my ionic app but with no success , can someone show me how to do it .thank you all

I noticed this error (http://localhost:9000/bower_components/intl-tel-input/lib/libphonenumber/build/utils.js 404 (Not Found)) on production only...

Hi,

When our form first loads it's marked as invalid. If I click inside of our international-phone-number input field the form is magically marked valid. All other validation between the input field itself and it's containing form seem to work.

Any ideas?

Thanks,
Jason

Hi, Mareczek,

Thanks for the response -- the ng-required now works! I'm using 0.0.6. I ran into one small error which I hope you can fix. I get an insertion error which prevents it from working. I made the following simple modification in the releases/international-phone-number.js file. I am not familiar with Coffeescript.

Current version:

(function() {
  "use strict";
  angular.module("internationalPhoneNumber", []).directive('internationalPhoneNumber', function($timeout) { ... });

My fixed version:

(function() {
  "use strict";
  angular.module("internationalPhoneNumber", []).directive('internationalPhoneNumber', ['$timeout', function($timeout) { ... }]);

Thanks for your help!

Liam

intlTelInput uses jQuery. I'm not sure how difficult it would be to reimplement the UI bits using AngularJS and/or ui.bootstrap, rather than jQuery.