Socket
Socket
Sign inDemoInstall

intl-input-phone

Package Overview
Dependencies
5
Maintainers
1
Versions
8
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

intl-input-phone

Angular library to provide the international phone number feature by country dropdown and input fields with lots of customization and features like input masking, change the country, require valiation and many more.


Version published
Maintainers
1
Weekly downloads
389
decreased by-28.1%

Weekly downloads

Readme

Source

International Phone Number (intl-input-phone)

Open Source Angular plugin for entering and validating international mobile numbers. It adds a flag dropdown with country name, country phone code to any input provide validation and many customization.

You can see Demo Here.

Demo Link 2

How to use -

  • Step 1 - Add dependancy in to your project This plugin has following dependancy -

    Please include the following cdn scripts in your project in order to use this plugin or you can download that script file manually and include it in head section of index.html file -

    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.min.js"></script>
    
  • Step 2 - Install the plugin.

      npm install intl-input-phone --save
    

    Import the module IntlInputPhoneModule in module file in import section.

    
     @NgModule({
       imports:      [ BrowserModule, FormsModule, IntlInputPhoneModule,..],
       declarations: [ AppComponent, ...  ],
       bootstrap:    [ AppComponent ]
     })
     export class AppModule {
       ....
     }
    
  • Step 3 - Use the plugin by using selector - intl-input-phone

        <intl-input-phone></intl-input-phone>
    

For more detail please check the Stackblitz Example

Features -

  • Customization in dropdown option. You can customize the dropdown option in following ways See Demo Here -

    • Country flag with country phone code.
    • Country flag with country name.
    • Country flag with country phone code and country name.
  • Customization in tooltip text. You can customize the tooltip of option and selected value in following ways See Demo Here-

    • Country ISO code.
    • Country name.
    • Country phone code.
  • Show the tooltip or not.

  • Customization in ordering of the dropdown. Their are following order in which you can sort the dropdown See Demo Here-

    • Country ISO code.
    • Country name.
    • Country phone code.
  • Provide the search option in the dropdown. Search is application on country name, country iso code and country phone code. Also provide flag to show search or not. See Demo Here

  • Provide the input masking according to the country phone format.

  • Provide the output event which call when the input is filled completed according to input masking. See Demo Here

  • Provide the customization in output format in form of number with country phone code and number only.

  • Provide the input property to set the value from model.

  • Provide the input property to customize the country list in the dropdown. Their are following cases when you customize dropdown See Demo Here-

    • You can customize the country name.
    • You can customize the country flag.
    • You can customize the country input masking.
    • You can specify only few country listing in dropdown instead of all country list.
    • You can add new country if not avaliable in my country.
  • Provide the Reactive form support. See Demo Here-

    • You can enable/disable control using reactive form.
    • You can set/get value using reactive form.
    • Note - When use control with reactive form, you should set control OutputFormat as OutputOptionsEnum.Number.

Documentation -

  • Input properties which can be used -

    • CountryList
    • ConfigurationOption
    • NumberTextValue
    • SelectedCountryISOCode
  • Output Events which can be used -

    • OnIsRequiredChange
    • OnNumberChange

Configuration Options -

Property and its usage available in ConfigurationOptions class.

  • SelectorClass : string - Property to set the selector for the dropdown. Default : 'IntlPhoneNumber'
  • OptionTextTypes : ContentOptionsEnum[] - Property to set which content show in option. Default : Flag, CountryPhoneCode
  • ToolTipText : TooltipOptionsEnum - Property to set the tooltip text. Default : Country Name
  • IsShowToolTip : boolean - Property to set whether tooltip is show or not. Default : true
  • IsShowSearchOption : boolean - Property to set whether user want search option or not. Default : true
  • SortBy : SortOrderEnum - Property to set the sort order of country list to be rendered. Default : CountryISOCode
  • IsShowAllOtherCountry : boolean - Property to set whether show all other country in dropdown as well or not, when specify custom country list in module. Default : true
  • OutputFormat : OutputOptionsEnum - Property to set in which format user want the output when fill the input correctly. Default : NumberWithCountryCode

ContentOptionsEnum -

Enums can be use to set the content which show in option. Enum members are -

  • Flag
  • CountryName
  • CountryPhoneCode

TooltipOptionsEnum -

Enum can be use to set the content of the tooltip. Enum members are -

  • CountryName
  • CountryPhoneCode
  • CountryISOCode

SortOrderEnum -

Enum to specify the sort order of dropdown list. Enum members are -

  • CountryName
  • CountryISOCode
  • CountryPhoneCode

OutputOptionsEnum -

Enum for specify output type of result. Enum members are -

  • NumberWithCountryCode
  • Number

Code Sample -

  • Show the selected country list.

    In component html file.

    <intl-input-phone [ConfigurationOption]="configOption1" [CountryList]="customCountryList1" ></intl-input-phone>
    

    In component typescript file.

    ...
    ...
    export class CustomizedCountryListComponent implements OnInit {
    configOption1 : ConfigurationOptions;
    customCountryList1 : CustomCountryModel[] = [];
    constructor() {
    
      //show the selected country
      this.configOption1 = new ConfigurationOptions();
      this.configOption1.SelectorClass = "CountryListType1";
      this.configOption1.IsShowAllOtherCountry = false;
      this.customCountryList1.push({ISOCode : "IN"});
      this.customCountryList1.push({ISOCode : "US"});
      this.customCountryList1.push({ISOCode : "SK"});
        ...
        ...
     }
     ....
     ....
    }
    
  • Change in order of dropdown list.

    In component html file.

    <intl-input-phone [ConfigurationOption]="configOption2"></intl-input-phone>
    

    In component typescript file.

    ...
    ...
    export class CustomizedOrderingComponent implements OnInit {
    configOption2 : ConfigurationOptions;
    constructor() {
    
    this.configOption2 = new ConfigurationOptions();
    this.configOption2.SelectorClass = "OrderByType2";
    //set the sortby value using the sortorderenum.
    this.configOption2.SortBy = SortOrderEnum.CountryName;
        ...
        ...
     }
     ....
     ....
    }
    
  • Change the tooltip text.

    In component html file.

    <intl-input-phone [ConfigurationOption]="configOption2"></intl-input-phone>
    

    In component typescript file.

    ...
    ...
    export class CustomizedTooltipComponent implements OnInit {
    configOption2 : ConfigurationOptions;
    constructor() {
    this.configOption2 = new ConfigurationOptions();
    this.configOption2.SelectorClass = "ToolTipType2";
    //set the tooltip text value from the tooltipoptionsenum.
    this.configOption2.ToolTipText = TooltipOptionsEnum.CountryISOCode;
        ...
        ...
     }
     ....
     ....
    }
    
  • Integrate the validation and set the value.

    In component html file.

    <intl-input-phone [ConfigurationOption]="configOption1" (OnIsRequiredChange)="requiredFlagChange($event)" (OnNumberChange)="onNumberChage($event)" [NumberTextValue]="NumberModel" [SelectedCountryISOCode]="SelectedCountryISOCode"></intl-input-phone>
    

    In component typescript file.

      ...
      ...
      export class IntegrateValidationComponent implements OnInit {
        configOption1: ConfigurationOptions;
        NumberModel: string = "+1 3235634245";
        SelectedCountryISOCode: string = "US";
        IsRequired: boolean = false;
        OutputValue : NumberResult = new NumberResult();
        constructor() {
        this.configOption1 = new ConfigurationOptions();
        this.configOption1.SelectorClass = "InputValidation1";
        this.configOption2.ToolTipText = TooltipOptionsEnum.CountryISOCode;
            ...
            ...
         }
         ...
         ...
    
          requiredFlagChange(isRequire: boolean) {
            this.IsRequired = isRequire;
          }
          onNumberChage(outputResult) {
            this.OutputValue = outputResult;
            console.log("Output result is", this.OutputValue);
          }
    
         ....
         ....
      }
    
  • Integrate with reactive form.

    In component html file.

      <form [formGroup]="sampleForm">
       <intl-input-phone [ConfigurationOption]="configOption1" formControlName="sampleReactiveControl" ></intl-input-phone>
      </form>
    

    In component typescript file.

      ...
      ...
      export class ReactiveFormSampleComponent implements OnInit {
        configOption1: ConfigurationOptions;
        sampleForm : FormGroup
        constructor( private formBuilder : FormBuilder) {
        this.sampleForm = this.formBuilder.group({
        "sampleReactiveControl" : new FormControl()
        });
        this.configOption1 = new ConfigurationOptions();
        //If you are use control using reactive form then you should use use this output form only.
        this.configOption1.OutputFormat = OutputOptionsEnum.Number;
            ...
            ...
         }
         ...
          
    
         ....
         ....
      }
    

Country list with detail -

Below are the list of country data used in this library. Which is appear in the dropdown. You can customize any country data by using Country ISO code.

Country ISO CodeCountry NameCountry Phone CodeMasking
ADAndorra+376999 999
AEUnited Arab Emirates+971999 999 9999
AFAfghanistan+93999 999 9999
AGAntigua and Barbuda+1 (268)999-9999
AIAnguilla+1 (264)999-9999
ALAlbania+355999 999 9999
AMArmenia+374999 999999
ANNetherlands Antilles+599999 9999
AOAngola+244999 999 999
AQAntarctica+6729 99999
ARArgentina+54999 99-9999-9999
ASAmerican Samoa+1 (684)999-9999
ATAustria+439999 999999
AUAustralia+619999 999 999
AWAruba+297999 9999
AZAzerbaijan+994999 999 99 99
BABosnia and Herzegovina+387999 999 999
BBBarbados+1 (246)999-9999
BDBangladesh+88099999-999999
BEBelgium+329999 99 99 99
BFBurkina Faso+22699 99 99 99
BGBulgaria+359999 999 999
BHBahrain+9739999 9999
BIBurundi+25799 99 99 99
BJBenin+22999 99 99 99
BLSaint Barthelemy+5909999 99 99 99
BMBermuda+1 (441)999-9999
BNBrunei+673999 9999
BOBolivia+59199999999
BRBrazil+55(99) 99999-9999
BSBahamas+1 (242)999-9999
BTBhutan+97599 99 99 99
BWBotswana+26799 999 999
BYBelarus+3759 999 999-99-99
BZBelize+501999-9999
CACanada+1(999) 999-9999
CCCocos Islands+619999 999 999
CDDemocratic Republic of the Congo+2439999 999 999
CFCentral African Republic+23699 99 99 99
CGRepublic of the Congo+24299 999 9999
CHSwitzerland+41999 999 99 99
CIIvory Coast+22599 99 99 99
CKCook Islands+68299 9999
CLChile+569 9999 9999
CMCameroon+2379 99 99 99 99
CNChina+86999 9999 9999
COColombia+57999 9999999
CRCosta Rica+5069999 9999
CUCuba+5399 9999999
CVCape Verde+238999 99 99
CWCuracao+599999 9999
CXChristmas Island+619999 999 999
CYCyprus+35799 999999
CZCzech Republic+420999 999 999
DEGermany+4999999 9999999
DJDjibouti+25399 99 99 99
DKDenmark+4599 99 99 99
DMDominica+1 (767)999-9999
DODominican Republic+1 (809)999-9999
DZAlgeria+2139999 99 99 99
ECEcuador+593999 999 9999
EEEstonia+3729999 9999
EGEgypt+209999 999 9999
EHWestern Sahara+2129999-999999
EREritrea+29199 999 999
ESSpain+34999 99 99 99
ETEthiopia+251999 999 9999
FIFinland+358999 9999999
FJFiji+679999 9999
FKFalkland Islands+50099999
FMMicronesia+691999 9999
FOFaroe Islands+298999999
FRFrance+3399 99 99 99 99
GAGabon+24199 99 99 99
GBUnited Kingdom+4499999 99999
GDGrenada+1 (473)999-9999
GEGeorgia+995999 99 99 99
GGGuernsey+4499999 999999
GHGhana+233999 999 9999
GIGibraltar+35099999999
GLGreenland+29999 99 99
GMGambia+220999 9999
GNGuinea+224999 99 99 99
GQEquatorial Guinea+240999 999 999
GRGreece+30999 999 9999
GTGuatemala+5029999 9999
GUGuam+1 (671)999-9999
GWGuinea-Bissau+245999 999 999
GYGuyana+592999 9999
HKHong Kong+8529999 9999
HNHonduras+5049999-9999
HRCroatia+385999 999 9999
HTHaiti+50999 99 9999
HUHungary+36(99) 999 9999
IDIndonesia+629999-999-999
IEIreland+353999 999 9999
ILIsrael+972999-999-9999
IMIsle of+4499999 999999
INIndia+9199999 99999
IOBritish Indian Ocean+246999 9999
IQIraq+9649999 999 9999
IRIran+989999 999 9999
ISIceland+354999 9999
ITItaly+39999 999 9999
JEJersey+4499999 999999
JMJamaica+1 (876)999-9999
JOJordan+96299 9999 9999
JPJapan+81999 9999-9999
KEKenya+2549999 999999
KGKyrgyzstan+9969999 999 999
KHCambodia+855999 999 999
KIKiribati+68699999999
KMComoros+269999 99 99
KNSaint Kitts+1 (869)999-9999
KPNorth Korea+8509999 999 9999
KRSouth Korea+82999-9999-9999
KWKuwait+965999 99999
KYCayman Islands+1 (345)999-9999
KZKazakhstan+79 (999) 999 9999
LALaos+856999 99 999 999
LBLebanon+96199 999 999
LCSaint Lucia+1 (758)999-9999
LILiechtenstein+423999 999 999
LKSri Lanka+94999 999 9999
LRLiberia+231999 999 9999
LSLesotho+2669999 9999
LTLithuania+370(9-999) 99999
LULuxembourg+352999 999 999
LVLatvia+37199 999 999
LYLibya+218999-9999999
MAMorocco+2129999-999999
MCMonaco+37799 99 99 99 99
MDMoldova+3739999 99 999
MEMontenegro+382999 999 999
MFSaint Martin+5909999 99 99 99
MGMadagascar+261999 99 999 99
MHMarshall Islands+692999-9999
MKMacedonia+389999 999 999
MLMali+22399 99 99 99
MMMyanmar+9599 999 9999
MNMongolia+9769999 9999
MOMacau+8539999 9999
MPNorthern Mariana Islands+1 (670)999-9999
MRMauritania+22299 99 99 99
MSMontserrat+1 (664)999-9999
MTMalta+3569999 9999
MUMauritius+2309999 9999
MVMaldives+960999-9999
MWMalawi+2659999 99 99 99
MXMexico+52999 999 999 9999
MYMalaysia+60999-999 9999
MZMozambique+25899 999 9999
NANamibia+264999 999 9999
NCNew Caledonia+68799 99 99
NENiger+22799 99 99 99
NGNigeria+2349999 999 9999
NINicaragua+5059999 9999
NLNetherlands+3199 99999999
NONorway+47999 99 999
NPNepal+977999-9999999
NRNauru+674999 9999
NUNiue+683999 9999
NZNew Zealand+64999 999 9999
OMOman+9689999 9999
PAPanama+5079999-9999
PEPeru+51999 999 999
PFFrench Polynesia+68999 99 99 99
PGPapua New+6759999 9999
PHPhilippines+639999 999 9999
PKPakistan+929999 9999999
PLPoland+48999 999 999
PMSaint Pierre+508999 99 99
PNPitcairn+6499 999999
PRPuerto Rico+1 (787)999-9999
PSPalestine+9709999 999 999
PTPortugal+351999 999 999
PWPalau+680999 9999
PYParaguay+5959999 999999
QAQatar+9749999 9999
REReunion+2629999 99 99 99
RORomania+409999 999 999
RSSerbia+381999 9999999
RURussia+79 (999) 999-99
RWRwanda+2509999 999 999
SASaudi Arabia+966999 999 9999
SBSolomon Islands+67799 99999
SCSeychelles+2489 999 999
SDSudan+249999 999 9999
SESweden+46999-999 99 99
SGSingapore+659999 9999
SHSaint Helena+29099999
SISlovenia+386999 999 999
SJSvalbard and Jan Mayen+47999 99 999
SKSlovakia+4219999 999 999
SLSierra Leone+232(999) 999999
SMSan Marino+37899 99 99 99
SNSenegal+22199 999 99 99
SOSomalia+2529 9999999
SRSuriname+597999-9999
SSSouth Sudan+2119999 999 999
STSao Tome+239999 9999
SVEl Salvador+5039999 9999
SXSint Maarten+1 (721)999-9999
SYSyria+9639999 999 999
SZSwaziland+2689999 9999
TCTurks and Caicos Islands+1 (649)999-9999
TDChad+23599 99 99 99
TGTogo+22899 99 99 99
THThailand+66999 999 9999
TJTajikistan+992999 99 9999
TKTokelau+6909999
TLEast Timor+6709999 9999
TMTurkmenistan+9939 99 999999
TNTunisia+21699 999 999
TOTonga+676999 9999
TRTurkey+909999 999 99 99
TTTrinidad and Tobago+1 (868)999-9999
TVTuvalu+688999999
TWTaiwan+8869999 999 999
TZTanzania+2559999 999 999
UAUkraine+380999 999 9999
UGUganda+2569999 999999
USUnited States+1(999) 999-9999
UYUruguay+598999 999 999
UZUzbekistan+9989 99 999 99 99
VAVatican+39999 999 9999
VCSaint Vincent and the Grenadines+1 (784)999-9999
VEVenezuela+589999-9999999
VGBritish Virgin Islands+1 (284)999-9999
VIU.S+1 (340)999-9999
VNVietnam+84999 999 99 99
VUVanuatu+678999 9999
WFWallis and Futuna+68199 99 99
WSSamoa+68599 99999
XKKosovo+383999 999 999
YEYemen+9679999 999 999
YTMayotte+2629999 99 99 99
ZASouth Africa+27999 999 9999
ZMZambia+260999 9999999
ZWZimbabwe+263999 999 9999

Contribute -

Thanks for using the plugin!! Feel free to report any issue or change request required.

Keywords

FAQs

Last updated on 07 Aug 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc