change event for changing country

[andriijas]

would be nice if there was a change event triggered when country is changed in the dropdown

[jackocnr]

There is already a change event triggered on the input element. You can see it in action in this example: http://jackocnr.com/lib/intl-tel-input/examples/gen/country-sync.html

Is that what you meant?

[andriijas]

ah stupid of me, of course change on the input will do it :) thanks!

[ScienceofSpock]

Sorry to dig this up, I found it when I was trying to figure out why my change events aren't firing: Apparently the telInput.change function doesn't fire if national mode is true. How do I get around this?

[jackocnr]

Thanks for pointing this out - fixed in v2.0.10.

BTW I don't suppose you have a link to your site where you're using the plugin with nationalMode enabled? I'm always interested to see how people use the plugin.

[ScienceofSpock]

Awesome, I worked around it by just polling getSelectedCountryData on form submit instead of changing it every time the user played with the flags. The site isn't quite live yet. We were supposed to launch this week, but mgmt decided to open it up to international users instead of just US users, so launch was pushed back a month. I'll let you know when we launch. Your plugin has saved us a LOT of work changing this over to international.

[seaBubble]

I am still experiencing issues with this, the event is fired but the model is not updated if I first enter the number and then change the flag. If I update the number after changing the flag, the model then picks up the flag. Any ideas?

Thanks,

[jackocnr]

@seaBubble please can you describe an example with steps to reproduce?

[seaBubble]

Thanks @jackocnr. I am using a directive as follows:

.directive('tInternationalPhone', ['internationalPhoneProvider', '$log', '$window', '$parse', '$timeout',
        function (internationalPhoneProvider, $log, $window, $parse, $timeout) {
            return {
                restrict: 'A',
                require: 'ngModel',
                link: function (scope, elm, attr, ctrl) {

internationalPhoneProvider.set({preferredCountries: ['gb']});

// Set initial country if passed as attribute
scope.$watch(function () {
    return attr.initialCountry;
}, function (newVal) {
    if (angular.isDefined(newVal) && newVal != null && newVal !== '') {
    var country = newVal.toLowerCase();
    internationalPhoneProvider.set({initialCountry: country});
    internationalPhoneProvider.init(elm);
}
});

if (attr.setInitialCountry === undefined || !attr.setInitialCountry) {
    internationalPhoneProvider.init(elm);
}

// Set Selected Country Data
function setSelectedCountryData(model) {
    var getter = $parse(model);
    var setter = getter.assign;
    setter(scope, elm.intlTelInput('getSelectedCountryData'));
}

 // Force input validation if country selection changes but number stays the same
angular.element($window).on('countrychange', function() {
    ctrl.$validate();
    $timeout(function() {
       scope.$apply();
     });
});

// Handle Country Changes.
function handleCountryChange() {
    setSelectedCountryData(attr.selectedCountry);
}

// Country Change cleanup.
function cleanUp() {
    angular.element($window).off('countrychange', handleCountryChange);
}

 // Selected Country Data.
 if (attr.selectedCountry) {
    setSelectedCountryData(attr.selectedCountry);
    angular.element($window).on('countrychange', handleCountryChange);
    scope.$on('$destroy', cleanUp);
}

// Validation.
ctrl.$validators.tInternationalPhone = function (value) {
    // if phone number is deleted / empty do not run phone number validation
   if (value || elm[0].value.length > 0) {
         return elm.intlTelInput('isValidNumber');
   } else {
       return true;
   }
};

// Set model value to valid, formatted version.
ctrl.$parsers.push(function (value) {
    return elm.intlTelInput('getNumber');
});

// Set input value to model value and trigger evaluation.
ctrl.$formatters.push(function (value) {
    if (value) {
        if(value.charAt(0) !== '+') {
            value = '+' + value;
        }
        elm.intlTelInput('setNumber', value);
    }
    return value;
});

}
            };
        }])

Initialising the directive:
<input type="tel" id="mobile" name="mobile" autocomplete="off" placeholder="Mobile Number" data-ng-model="user.mobile" required="required" t-international-phone class="form-control" data-initial-country="{{defaultCountryCode}}" data-set-initial-country="true">

Now, if I enter a number in the input field (478111111) with UK country code selected, and then change the flag selector to Australia, the model is not updated with the Australian country code, it stays as +44478111111.

Thank you!

[jackocnr]

I'm sorry but questions about Angular are outside the scope of this plugin. If you can reproduce your problem without Angular then I'd be happy to look into it for you.

[MalharDevasthali]

There is already a change event triggered on the input element. You can see it in action in this example: http://jackocnr.com/lib/intl-tel-input/examples/gen/country-sync.html

Is that what you meant?

this link is not working , I am facing same issue , when I enter number first and then change the country then its not working , can you please help how I can get call back when country is getting changed