Nevertheless Published Mine

    phone-number-entry
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.2 • Public • Published

    CountryRegion-City-Selector

    This Angular Material component (Module) allows for phone number entry. This has been supported for US and Canada. This component validates the international code and areacode for the region.

    more details to come...

    Installation

    npm install phone-number-entry
    

    Scaffolding

    Import the module into your project under imports

    imports: [
      BrowserModule,
      AppRoutingModule,
      PhoneNumberEntryModule
    ]
    

    Use

    Create a formControl for phone number

    form = this.fb.group({
      phone: [null],
    })
    

    You have to specify the data files

    dataFiles: DataFile = {
      international: { name: 'International', file: 'assets/data/international-codes.csv'},
      countries: [
        { name: 'Canada', file: 'assets/data/canada-areacodes.csv'},
        { name: 'United States', file: 'assets/data/united-states-areacodes.csv' }
      ]
    }
    
    

    In your component, use the following tag

    <div [formGroup]="form">
      <wav-phone-number-entry
        [dataFiles]="countries"
      ></wav-phone-number-entry>
    </div>
    

    Inputs

    The following Inputs are available

    Input Type Defaut Description
    dataCountryFiles CountryDataFile[] [ ] list of countries and data
    phone STRING NULL Phone - format:0019101129999x201
    placeholder STRING 'New York' Label for placeholder (autocomplete input)
    required BOOLEAN '' adds required validator
    style STRING '' styles to apply to formfield/select
    maxLen NUMBER NULL input max for city entry
    Appearence STRING NULL input style

    Outputs

    The following Outputs available

    Sample Implementation

    <div [formGroup]="form">
      <wav-phone-number-entry
        [dataCountryFiles]="countries"
      ></wav-phone-number-entry>
    </div>
    
    

    Input return

    You will note that the control will only return only if country, region and city controls are defined in the form object

    {
      "phone": "0014159021111x1023",
    }
    

    Below is a sample of the implementation

    more to come...
    

    Install

    npm i phone-number-entry

    DownloadsWeekly Downloads

    2

    Version

    1.0.2

    License

    ISC

    Unpacked Size

    325 kB

    Total Files

    36

    Last publish

    Collaborators

    • wavecoders