Noiseless Praying Mantis
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    ng-intl-tel-minipublic

    Angular International Telephone Input Mini

    A simple Angular 1 directive for Telephone input based off of intl-tel-input, with no jquery.

    How it works

    This library pulls in 2 important parts of the intl-tel-input library.

    • src/js/data.js
      • Gives us a list of countries to populate the 'drop down' with
    • build/js/utils.js

    These get bundled into this library. We then mimic the layout of an input element from intl-tel-input.

    Why

    • I don't want jQuery included in my angular project. Other angular wrappers for intl-tel-input still require you import jQuery.
    • I don't need all the features of intl-tel-input.
    • intl-tel-input has done some great work on wrapping libphonenumber and compiling a list of countries + dial codes that doesn't need to be redone.
    • Why not go vanilla javascript? Time. But you can help the main project Remove jQuery Dependencies.

    Additions

    Adds in a search ability, as navigating that dropdown is very hard.

    Using It

    Import it:

        var myApp = angular.module('my-app', [
            require('ng-intl-tel-mini')
        ]);

    Create the directive:

        <ng-intl-tel-mini on-number-validity-check="isValid($isValid, $error, $phoneNumber)" show-search="true" country="country" />

    on-number-validity-check : Callback for when we perform a validity check. Populates 3 variables

    * $isValid: boolean - true if the number is considered valid.
    * $error: int - the error code for the number
    * $phoneNumber: string - a formated number in the style of INTERNATIONAL
    * $inputVal: string - the value put into the text box
    

    show-search : If we should add in the search option to the input.

    country : The default country we should use. This variable will be updated as the country gets changed.

    Styling

    Same as intl-tel-input except for search:

    • .country-search : Div wrapper around search input.

    License

    This code: MIT. See libphonenumber and intl-tel-input for their licenses.

    Keywords

    none

    install

    npm i ng-intl-tel-mini

    Downloadslast 7 days

    8

    version

    0.1.18

    license

    MIT

    last publish

    collaborators

    • avatar