Angular directive phone number using intl-tel-input lib

Question

I'm currently trying to create a custom directive that initializes input with the following library: intl-tel-input .

So, I downloaded the required .js file using bower:

<script src="bower_components/intl-tel-input/build/js/intlTelInput.min.js"></script> 

Then I create my input:

 input type="tel" class="form-control" id="tel" name="tel" ng-model="informations.tel" ng-keyup="checkPhoneFormat()" ng-click="checkPhoneFormat()"> 

And I initialize it at the beginning of my controller as follows:

 angular.element('#tel).intlTelInput({ validationScript: "../../bower_components/intl-tel-input/lib/libphonenumber/build/isValidNumber.js", preferredCountries: ['en', 'fr'] }); 

My problem is that when I try to access the informations.tel model, it is always undefined. The input does not seem to update the model value on the fly.

So I need to write something like this in order to relate the actual value of my input field to my immutable model value:

  $scope.checkPhoneFormat = function(){ $scope.informations.telephone = angular.element('#telephone').val(); ...} 

This may be fine, but I would like to create a custom directive to initialize such inputs, for example:

 app.directive('phoneInput', function (PhoneFactory) { return { require: 'ngModel', restrict: 'A', scope: { phoneNumber: '=' }, link: function (scope, element, attrs, ctrl) { element.intlTelInput({ validationScript: "../../bower_components/intl-tel-input/lib/libphonenumber/build/isValidNumber.js", preferredCountries: ['en', 'fr'] }); ctrl.$parsers.unshift(function(viewValue) { console.log(viewValue); }); } }; }); 

But since the ngModel undefined initialization function is never reached ... Do you have any idea how I can solve my problem?

Answer 1

You are correct that the model is not updated automatically. You can make such a directive

 app.directive('intlTel', function(){ return{ replace:true, restrict: 'E', require: 'ngModel', template: '<input type="text" placeholder="eg [phone]">', link: function(scope,element,attrs,ngModel){ var read = function() { var inputValue = element.val(); ngModel.$setViewValue(inputValue); } element.intlTelInput({ defaultCountry:'fr', }); element.on('focus blur keyup change', function() { scope.$apply(read); }); read(); } } }); 

which could be called so

 <intl-tel ng-model="model.telnr"></intl-tel> 

Here is the plunker

Answer 2

There is a new directive called international-phone-number @ https://github.com/mareczek/international-phone-number

Please check, any contributions are welcome.

Answer 3

Some of us used the Marks directive, but the lack of testing and the required jquery position in the head caused problems, so ng-intl-tel-input was created:

https://github.com/hodgepodgers/ng-intl-tel-input

Check it out, block and functionally tested with a protractor. Play here:

http://hodgepodgers.imtqy.com/ng-intl-tel-input/

Answer 4

The Mark directive worked for me: https://github.com/mareczek/international-phone-number

One problem with intl-tel-input (at least with v3.6) is that it does not format the phone number that you initialize it correctly * if there is no plus sign ('+') in front of you. This leads to confusing behavior for my users. I keep my phone numbers normalized (without a plus sign) in my database, so I need to hack to get around this. Instead of formatting on the server, I decided to format the phone number in the interface. I added the following Mark directive to get the behavior I need:

 var makeSureInitialValueStartsWithPlusSign = function() { var clear_watcher = scope.$watch(attrs.ngModel, function(changes) { elem_val = element.val(); if (elem_val && elem_val[0] != "+") { element.val("+" + changes); clear_watcher(); } }); }; makeSureInitialValueStartsWithPlusSign(); 

Thanks Mark

* Correctly, I mean the conversion of '19734566789' to '[phone]'. int-tel-input converts "19734566789" to "1 973-456-6789" (without pus). When the user proceeds to edit, they experience drunken behavior, because there is no plus.