p-intl-input-tel-gg
v19.0.3
Published
[![npm version](https://badge.fury.io/js/p-intl-input-tel-ggg.svg)](https://badge.fury.io/js/p-intl-input-tel-ggg) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
Downloads
763
Maintainers
Readme
📞 International Telephone Input for Angular
🔄 Fork Information
This is a fork of p-intl-input-tel that fixes several critical issues:
Key Improvements Over Original
- ✅ Fixed validation errors not being propagated to parent form controls
- ✅ Encapsulate styles to prevent affecting other components
- 🔄 Added proper paste handling with automatic formatting
- ⚡ Implemented real-time validation
- 🌍 Improved country code detection when pasting international numbers
- 🚫 Fixed maxLength issues with international number formats
- 🔍 Enhanced error messages and validation feedback
An Angular component 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.
✨ Features
- 🌍 International phone number formatting
- 🚩 Country selection with flags
- ✅ Real-time validation using google-libphonenumber
- 📋 Smart paste handling with format detection
- 🔍 Country search functionality
- 💪 Fully typed with TypeScript
- 🎨 Customizable styling
- 🔄 Reactive Forms support
- 🚫 Proper form validation integration
🔧 Version Compatibility
🔧 Version Compatibility
| Library Version | Angular | PrimeNG | | --------------- | ------- | ----------- | | 18.0.5-18.0.6 | 18.x.x | >= 17.18.0 | | 18.0.7-18.0.12 | 18.x.x | 18.0.0-rc.2 |
📦 Installation
1. Install Package and Dependencies
# Install the main package
npm install p-intl-input-tel-gg --save
# Install required dependencies
npm install google-libphonenumber primeng tailwindcss @types/google-libphonenumber --save
2. Add Styles
Add the following to your angular.json
styles array:
{
"styles": ["./node_modules/p-intl-input-tel-gg/src/assets/style.scss"]
}
🚀 Usage
Basic Setup
// app.component.ts
import { IntlInputTelComponent } from 'p-intl-input-tel-gg';
import { CountryISO, PhoneNumberFormat, SearchCountryField } from 'p-intl-input-tel-gg';
@Component({
// ...
imports: [IntlInputTelComponent]
})
Template Integration
<form [formGroup]="phoneForm">
<p-intl-tel-input-gg [favoriteCountries]="['US', 'GB', 'FR']" [enableAutoCountrySelect]="true" [displayPlaceholder]="true" [selectedCountryISO]="CountryISO.UnitedStates" [phoneValidation]="true" [separateDialCode]="true" [numberFormat]="PhoneNumberFormat.INTERNATIONAL" [searchCountryField]="[SearchCountryField.NAME, SearchCountryField.DIALCODE]" cssClass="custom-input" formControlName="phone"> </p-intl-tel-input-gg>
</form>
Form Validation Example
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
export class AppComponent {
phoneForm: FormGroup;
constructor(private fb: FormBuilder) {
this.phoneForm = this.fb.group({
phone: ["", Validators.required],
});
}
onSubmit() {
if (this.phoneForm.valid) {
console.log("Valid phone number:", this.phoneForm.get("phone").value);
} else {
// Form validation errors are now properly propagated
const phoneControl = this.phoneForm.get("phone");
if (phoneControl.errors?.["invalidNumber"]) {
console.log("Invalid phone number");
}
if (phoneControl.errors?.["parseError"]) {
console.log("Could not parse phone number");
}
}
}
}
🚨 Validation Errors
The component now properly propagates these validation errors to the parent form:
| Error | Description |
| ----------------- | ----------------------------------------------- |
| invalidNumber
| Phone number is invalid for the selected region |
| parseError
| Could not parse the input as a phone number |
| invalidCountry
| Selected country is invalid |
| formatError
| Error occurred while formatting the number |
| unexpectedError
| An unexpected error occurred during validation |
⚙️ Configuration Options
Input Properties
| Property | Type | Default | Description |
| ----------------------- | ---------------------- | --------------------------------- | ----------------------------------- |
| cssClass | string
| 'control-form'
| Custom CSS class for styling |
| favoriteCountries | CountryISO[]
| []
| Priority countries shown at the top |
| onlyCountries | CountryISO[]
| []
| Restrict to specific countries |
| enableAutoCountrySelect | boolean
| true
| Auto-select country based on input |
| displayPlaceholder | boolean
| true
| Show example number placeholder |
| customPlaceholder | string
| - | Override default placeholder |
| numberFormat | PhoneNumberFormat
| PhoneNumberFormat.INTERNATIONAL
| Number formatting style |
| searchCountryField | SearchCountryField[]
| [SearchCountryField.NAME]
| Fields to include in country search |
| phoneValidation | boolean
| true
| Enable/disable number validation |
| selectedCountryISO | CountryISO
| - |