![PyPI Now Supports iOS and Android Wheels for Mobile Python Development](https://cdn.sanity.io/images/cgdhsj6q/production/96416c872705517a6a65ad9646ce3e7caef623a0-1024x1024.webp?w=400&fit=max&auto=format)
Security News
PyPI Now Supports iOS and Android Wheels for Mobile Python Development
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.
@deliverysolutions/ngx-intl-tel-input
Advanced tools
This package has been forked for Delivery Solution's internal usage. Please feel free to use the package if it serves your needs, but be aware that reported issues may not be addressed in a timely manner.
This package has been forked for Delivery Solution's internal usage. Please feel free to use the package if it serves your needs, but be aware that reported issues may not be addressed in a timely manner.
Huge, huge thanks to the original authors and contributors for their work on this package. Please see the contributors section below.
An Angular package for entering and validating international telephone numbers. It adds a flag dropdown to any input, detects the user's country, displays a relevant placeholder and provides formatting/validation methods.
Compatibility:
Validation with google-libphonenumber
@deliverysolutions/ngx-intl-tel-input | Angular | ngx-bootstrap |
---|---|---|
1.x.x | 15.x.x | >= 10.0.0 |
$ npm install @deliverysolutions/intl-tel-input@1.0.0
$ npm install google-libphonenumber
$ ng add ngx-bootstrap
If you do not wish to use Bootstrap's global CSS, we now package the project with only the relevant
bootstrap styling needed for the dropdown. As such, you can remove the bootstrap styling from angular.json
.
Further, Angular CLI should tree-shake the rest of Ngx-Boostrap away if you don't utilize other dependencies from the bootstrap package. This should keep this dependency a lean feature-add
Add 'intl-tel-input' style file:
./node_modules/@deliverysolutions/intl-tel-input/build/css/intlTelInput.css
to angular.json styles array:
"styles": [
"./node_modules/@deliverysolutions/intl-tel-input/build/css/intlTelInput.css",
"src/styles.css"
],
$ npm install @deliverysolutions/ngx-intl-tel-input
Add NgxIntlTelInputModule
to your module file:
imports: [NgxIntlTelInputModule];
Refer to main app in this repository for working example.
<form #f="ngForm" [formGroup]="phoneForm">
<ngx-intl-tel-input
[cssClass]="'custom'"
[preferredCountries]="[CountryISO.UnitedStates, CountryISO.UnitedKingdom]"
[enableAutoCountrySelect]="false"
[enablePlaceholder]="true"
[searchCountryFlag]="true"
[searchCountryField]="[SearchCountryField.Iso2, SearchCountryField.Name]"
[selectFirstCountry]="false"
[selectedCountryISO]="CountryISO.India"
[maxLength]="15"
[phoneValidation]="true"
[inputId]="my-input-id"
name="phone"
formControlName="phone"
></ngx-intl-tel-input>
</form>
Options | Type | Default | Description |
---|---|---|---|
cssClass | string | control-form | Bootstrap input css class or your own custom one. |
preferredCountries | <CountryISO>[] | [] | List of countries, which will appear at the top. |
onlyCountries | <CountryISO>[] | [] | List of manually selected countries, which will appear in the dropdown. |
enableAutoCountrySelect | boolean | true | Toggle automatic country (flag) selection based on user input. |
enablePlaceholder | boolean | true | Input placeholder text, which adapts to the country selected. |
customPlaceholder | string | None | Custom string to be inserted as a placeholder. |
numberFormat | <PhoneNumberFormat> | PhoneNumberFormat.International | Custom string to be inserted as a placeholder. |
searchCountryFlag | boolean | false | Enables input search box for countries in the flag dropdown. |
searchCountryField | <SearchCountryField>[] | [SearchCountryField.All] | Customize which fields to search in, if searchCountryFlag is enabled. Use SearchCountryField helper enum. |
searchCountryPlaceholder | string | 'Search Country' | Placeholder value for searchCountryField |
maxLength | number | None | Add character limit. |
selectFirstCountry | boolean | true | Selects first country from preferredCountries if is set. If not then uses main list. |
phoneValidation | boolean | true | Disable phone validation. |
inputId | string | phone | Unique ID for <input> element. |
selectedCountryISO | <CountryISO> | None | Set specific country on load. |
separateDialCode | boolean | false | Visually separate dialcode into the drop down element. |
countryChange | <Country> | None | Emits country value when the user selects a country from the dropdown. |
onInputBlur | string | None | Emits the current value set on the input. |
Following formats are supported
./projects/ngx-intl-tel-input
./src/app
with new functionality.$ npm run build_lib
$ npm run copy-files
$ npm run npm_pack
$ npm run package
After building and creating package, you can use it locally too.
In your project run:
$ npm install --save {{path to your local '*.tgz' package file}}
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!
FAQs
This package has been forked for Delivery Solution's internal usage. Please feel free to use the package if it serves your needs, but be aware that reported issues may not be addressed in a timely manner.
The npm package @deliverysolutions/ngx-intl-tel-input receives a total of 5 weekly downloads. As such, @deliverysolutions/ngx-intl-tel-input popularity was classified as not popular.
We found that @deliverysolutions/ngx-intl-tel-input demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
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.
Security News
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.
Security News
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.