Awesome
intl-tel-input-ng
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 thescripts
section in yourangular.json
. - Add
node_modules/intl-tel-input/build/css/intlTelInput.css
to thestyles
section in yourangular.json
. - Import
IntlTelInputNgModule.forRoot()
in your main application module.
Options
options
: An object wrapping theintl-tel-input
options.label
: If specified, will generate alabel
for the input (if the name option is set too).name
: Setsname
andid
attributes for the input. The default value isintl-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 therequired
&&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'],
i18n: { ch: 'Suisse' },
onlyCountries: ['fr', 'ch']
}"
[(E164PhoneNumber)]="E164PhoneNumber"></intl-tel-input>
</form>