p-intl-input-tel-gg v19.0.5

📞 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

📦 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:

⚙️ Configuration Options

Input Properties