Comments (10)
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?
from intl-tel-input.
ah stupid of me, of course change on the input will do it :) thanks!
from intl-tel-input.
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?
from intl-tel-input.
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.
from intl-tel-input.
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.
from intl-tel-input.
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,
from intl-tel-input.
@seaBubble please can you describe an example with steps to reproduce?
from intl-tel-input.
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!
from intl-tel-input.
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.
from intl-tel-input.
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
from intl-tel-input.
Related Issues (20)
- [Feature Request] Dark mode on documentation. HOT 4
- Translated country name is passed in few instances HOT 2
- Typescript definitions wrong with 21.2.6 HOT 9
- InitialValue in react component does not set the number and country state values. HOT 2
- Unable to resolve path to module 'intl-tel-input/react' HOT 8
- isValidNumber not working when util.js is pre-loaded (not lazy loaded) in v22.0.2 HOT 6
- Demo with javascript locacles HOT 4
- Arabic locale HOT 6
- Invalid country data for French overseas territories HOT 2
- Convert flags.png to AVIF format to comply with PageSpeed Insights recommendation HOT 4
- New Country to be added => Artsakh | 374 47, 374 97 HOT 2
- U.S. is not showing the u.s. flag HOT 10
- Dark Mode Support HOT 2
- Question about strictMode HOT 3
- Validation doesn't work for some phone numbers from Germany HOT 2
- utilsScript fails to load the utils from CDN in Next.js app HOT 13
- This input doesn't work on two elements HOT 3
- Getting error while using utilsScript HOT 6
- React component - allow access to intlTelInput instance HOT 8
- [Webpack] Compilation warning when initializing `intlTelInput` with `utilsScript` HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from intl-tel-input.