intl-tel-input-ng

intl-tel-input-ng

Changelog

Please read the changelog

Contributing

Use the fork, Luke. PR without tests will likely not be merged.

What is it ?

It's an angular component to easily integrate intl-tel-input.

Installation

To install this library, run:

# install intl-tel-input
$ npm install intl-tel-input --save / yarn add intl-tel-input

# install this module
$ npm install intl-tel-input-ng --save / yarn add intl-tel-input-ng

• Add node_modules/intl-tel-input/build/js/utils.js to the scripts section in your angular.json.
• Add node_modules/intl-tel-input/build/css/intlTelInput.css to the styles section in your angular.json.
• Import IntlTelInputNgModule.forRoot() in your main application module.

Options

• options: An object wrapping the intl-tel-input options.
• onlyLocalized: If true, displays only localized country data. See here.
• label: If specified, will generate a label for the input (if the name option is set too).
• name: Sets name and id attributes for the input. The default value is intl-tel-input-name.
• cssClass: The CSS class used to style the input component.
• labelCssClass: The CSS class used to style the label associated to the input.
• required: Sets the required && aria-required attributes for the input.
• [(E164PhoneNumber)]: Outputs the phone number in E164 format if valid.

See the intl-tel-input repository for more documentation.

Example:

The component must be declared between <form> tags !

<form #form="ngForm">
   <intl-tel-input
       [label]="'Please enter your phone number'"
       [name]="'my-name'"
       [cssClass]="'form-control'"
       [labelCssClass]="'col-sm-2 col-form-label'"
       [required]="true"
       [options]="{
           preferredCountries: ['ch'],
           localizedCountries: { ch: 'Suisse' },
           onlyCountries: ['fr', 'ch']
       }"
       [onlyLocalized]="true"
       [(E164PhoneNumber)]="E164PhoneNumber"></intl-tel-input>
</form>