📞 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

| Library Version | Angular | PrimeNG | | --------------- | ------- | ---------- | | 16.x.x | 16.x.x | >= 16.8.0 | | 17.x.x | 17.x.x | >= 17.2.0 | | 18.x.x | 18.x.x | >= 17.18.0 |

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