SkTelInput
SK Telephone Input (sk-tel-input) is a JavaScript plugin for entering and validating international telephone numbers. It takes a regular input field, adds a searchable country dropdown, displays a relevant placeholder number, formats the number as you type, and provides comprehensive validation methods. Furthermore, the styling is super easy as this plugin supports various inputs and as a result with the use
of inputs you can make the telephone input as per your requirements.
If you find the plugin helpful, please consider Supporting the project.
Table of Contents
Features
- Navigate the country dropdown by typing a country's name, or using up/down keys
- Set preferred countries as a list
- Set initial selected country
- Optionally only allow numeric characters and cap the number at the maximum valid length
- The user types their national number and the plugin gives you the full standardised international number
- Number validation, including specific error types
- High-resolution flag images
- Typescript type definitions included
- Easily customise styles by providing component inputs.
- Translations for country names (etc) provided in many different languages
- Lots of initialisation options for customisation, as well as public methods/events for interaction
Browser Compatibility
| Chrome | Firefox | Safari | Edge |
| :----: | :-------: | :----: | :--: |
| ✓ | ✓ | ✓ | ✓ |
Getting Started
-
Install with npm: npm i sk-tel-input
-
Declare the module at the imports array in app.module or any other module of your project. Example in a page module:
import { SKTelInputModule } from "sk-tel-input";
...
...
...
imports: [...SKTelInputModule],
3a. Use the sk-tel-input inside a page or any other component as follows:
<sk-tel-input
[totalBackgroundHexColor]="'#FFF'" [selectorBackgroundHexColor]="'#F1F7FE'"
[inputBackgroundHexColor]="'#FFF'" [borderHexColor]="'#F1F7FE'"
[arrowIconHexColor]="'#7904FF'" [checkedCountryIconHexColor]="'#7904FF'"
[dividerPreferredCountriesColor]="'#F1F7FE'" [dividerSearchInputCountriesColor]="'#F1F7FE'"
[inputContents]="getFormControlValue('phone')"
[placeholderInput]="'placeholder.text' | translate"
[textInputHexColor]="'#212121'" [caseCodeSelectorTriggerID]="'register_page_mob_phone'"
[initialSelectedCountryISO]="IsoCode.Greece" [selectedCountryByPhoneCode]="getFormControlValue('prefix')"
[preferredCountriesISOList]="[IsoCode.Greece, IsoCode.France]"
[placeholderSearchCountriesInput]="'search.placeholder' | translate"
[presentSearchBarCountries]="true"
(emitInputContentEvent)="handleSkTelInputContents($event)">
</sk-tel-input>
3b. Declare the IsoCode Enum as a variable in your .ts file as follows:
import {IsoCode} from 'sk-tel-input';
export class HomePage{
public IsoCode = IsoCode;
constructor(){}
}
- In the corresponding .ts component or page file, handle the selected country as follows
getFormControlValue(givenControlTag: string): any {
return this.testForm.get(givenControlTag).value;
}
handleSkTelInputContents(skTelOutput: SKTelInputOutput){
this.helper.consoleHandler('SK Tel Input Output: ', skTelOutput);
this.testForm.get('prefix').setValue(`+${skTelOutput.selectedCountryCode.dialCode}`);
this.testForm.get('phone').setValue(`${skTelOutput.telInputContents}`);
}
Internal Interfaces
The sk-tel-input uses two interfaces internally in order to handle all the data in a delicate and respectful manner. These interfaces are:
- SKTelInputOutput Interface
import { CountryCodeSelectOption } from "./country-select-option";
export interface SKTelInputOutput {
selectedCountryCode: CountryCodeSelectOption;
telInputContents: string;
}
- CountryCodeSelectOption interface
export interface CountryCodeSelectOption {
id: number;
dialCode: string;
iso2: string;
name: string;
srcIcon: string;
isSelected: boolean;
isPreferred: boolean;
}
IsoCode Enum
The sk-tel-input uses internally the IsoCode enum in order to provide an easier way of declaring the preferred countries and the initial selected country.
With IsoCode enum you can type any supported language as follows. For example for Greece and France:
IsoCode.Greece = 'gr'
IsoCode.France = 'fr'
As you comprehend, there is no need to remember or know the ISO Codes of each country. IsoCode enum suggests and provides the necessary correlation.
On the template you can write the following for the 'preferredCountriesISOList':
[preferredCountriesISOList]=[IsoCode.Greece, IsoCode.France]
Initialisation Options
When you initialise the sk-tel-input component you can provide any initialisation options you want, which are detailed below. Note: any options that take country codes should be ISO 3166-1 alpha-2 codes.
totalBackgroundHexColor
Type: String
Default: '#FFF'
The background of the total sk-tel-input component. The default color is '#FFF' but you can change it at any time per your requirements.
inputBackgroundHexColor
Type: String
Default: '#FFF'
The background of the ion-input for the phone number of the sk-tel-input. The default color is '#FFF' but you can change it at any time per your requirements.
selectorBackgroundHexColor
Type: String
Default: '#F1F7FE'
The background of the entire country selector of the sk-tel-input. The default color is '#F1F7FE' but you can change it at any time per your requirements.
borderHexColor
Type: String
Default: '#F1F7FE'
The border color of the the entire sk-tel-input component. The border is 2px solid and the selected color. The default color is '#F1F7FE' but you can change it at any time per your requirements.
arrowIconHexColor
Type: String
Default: '#7904FF'
The color of the up-down arrow icon of the country code selector. The default color of the icon is '#7904FF' but you can change it at any time per your requirements.
checkedCountryIconHexColor
Type: String
Default: '#7904FF'
The color of selected country check icon of the country code selector. The default color of the icon is '#7904FF' but you can change it at any time per your requirements.
dividerPreferredCountriesColor
Type: String
Default: '#F1F7FE'
The color of divider line between the preferred countries list and the entire countries list. The default color of the icon is '#F1F7FE' but you can change it at any time per your requirements.
dividerSearchInputCountriesColor
Type: String
Default: '#F1F7FE'
The color of divider line between the preferred countries list and the search bar. The default color of the icon is '#F1F7FE' but you can change it at any time per your requirements.
inputContents
Type: String
Default: ''
Any initial contents for the input of the sk-tel-input.
readOnlyInput
Type: Boolean
Default: false
A boolean input that indicates if the ion-input is in read-only mode. If true, then the value of the input cannot be changed.
placeholderInput
Type: String
Default: ''
The placeholder of the phone ion-input.
textInputHexColor
Type: String
Default: '#212121'
The color of the writing text in the input. The default color of the icon is '#212121' but you can change it at any time per your requirements.
caseCodeSelectorTriggerID
Type: String
Default: Random Text ID
The id for the internal popover of the sk-tel-input. This value is required. Although, if not provided then the component will auto
generate a random id in order for the popover to work properly.
placeholderSearchCountriesInput
Type: String
Default: ''
The placeholder of the ion-input of the search bar for the countries list.
caretColorInput
Type: String
Default: '#212121'
The color of caret of the ion-input. The default color of the icon is '#212121' but you can change it at any time per your requirements.
totalSkTelInputBorderRadius
Type: Number
Default: 12
The number of border-radius px of the entire sk-tel-input. This means that any number value will be placed in all corners of the component equally. The default border-radius is 12px but you can change it at any time per your requirements.
initialSelectedCountryISO
Type: String
Default: 'gr'
The initial selected country for the sk-tel-input. If not provided, then Greece ('gr') is automatically selected.
preferredCountriesISOList
Type: Array[string]
Default: Empty
An array in order to provide all the preferred countries by iso code at the top of the popover component. If not provided then, no preferred languages are set on the top of the popover.
presentSearchBarCountries
Type: Boolean
Default: true
A boolean input that indicates if the search bar for the countries list is presented. By default this is set to true but you can change it any given time.
presentSearchBarCountries
Type: Boolean
Default: true
A boolean input that indicates if the search bar for the countries list is presented. By default this is set to true but you can change it any given time.
selectedCountryByPhoneCode
Type: String
Default: '+30'
A string phone code that sets the initial selected country. This is optional. If not provided then the initialSelectedCountryISO will be set initially.
patternMobile
Type: String
Default: ''
A Regex pattern to apply to the phone input contents. This is optional. If it is provided then the input contents are tested against the
provided pattern and as a result the input is highlighted with a red border in case of not following the pattern. The color of the error border is the provided at borderWrongPatternHexColor input.
borderWrongPatternHexColor
Type: String
Default: '#932222'
The color of the border error at ion-input in case of provided a pattern. The default color of the error border color is '#932222' but you can change it at any time per your requirements.
Further Help, Links, LinkedIn
To get more help on the sk-tel-input, feel free to send me any questions at: Savvas Kostoudas
Let's connect on LinkedIn: LinkedIn
If you find the plugin helpful, please consider Supporting the project.