Intl-tel-input javascript library in Aura Component
So I have a requirement in Aura Component were in, I need to create an international telephone input field. I found this library called https://github.com/jackocnr/intl-tel-input but I'm having issues trying to implement it. One of the requirements to implement this field is to load the javascript file utils.js for me to call validation/formatting methods already available in the library.
What i'm doing so far is present in the code below
Component :
Controller after script is loaded method :
$A.createComponent( "ltng:require", { "scripts": $A.get('$Resource.int_tel_input') + '/js/utils.js', "afterScriptsLoaded" : component.getReference('c.submit') }, function(newRequire,status, errorMessage){ if (status === "SUCCESS") { console.log('Success - > '); var body = component.get("v.body"); body.push(newRequire); component.set("v.body", body); console.log(component.get('v.body')); } } );
javascript function from library that is throwing an error.
var injectScript = function injectScript(path, handleSuccess, handleFailure) { // inject a newscript element into the page var script = document.createElement("script"); script.onload = function() { forEachInstance("handleUtils"); if (handleSuccess) handleSuccess(); }; script.onerror = function() { forEachInstance("rejectUtilsScriptPromise"); if (handleFailure) handleFailure(); }; script.className = "iti-load-utils"; script.async = true; script.src = path; document.body.appendChild(script); };
AfterScriptsLoaded is not being called so I'm sure there's something wrong with the way I try to load the javascript library.
Any tip is appreaciated or can someone point me in the right direction who have implemented this library before in Aura Component. How to create intltelinput ?
Regards
International Telephone Input(intl-tel-input) is a JavaScript plugin for entering and validating international telephone numbers. It adds a flag dropdown to any input, detects the user's country, displays a relevant placeholder and provides formatting/validation methods.
How to load the intl-tel-input javascript library?
Follow the steps below:
Install with npm: npm install intl-tel-input --save or yarn: yarn add intl-tel-input.
Import CSS: import 'intl-tel-input/build/css/intlTelInput.css';
Override the path to flags.png in your CSS.
How to create intl-tel-input?
To create intl-tel-input, you need to embed the intl-tel-input plugin in your code.
0.8, but you can find the latest version by checking out the tags. You can also install the plugin with a bundler or download and host the source code yourself. For nicer styles, create a new file in the same folder called styles. css and add the CSS found here.
Features of Intl-tel-input javascript library
Automatically select the user's current country using an IP lookup.
Automatically set the input placeholder to an example number for the selected country.
Navigate the country dropdown by typing a country's name, or using up/down keys.
Handle phone number extensions.