ngx-primeng-phone-input

Created by Abhishek Rana

Angular phone input built natively for PrimeNG — with country picker, libphonenumber-js validation, and Reactive Forms support.

Install

npm install ngx-primeng-phone-input libphonenumber-js primeng

Install a PrimeNG theme package matching your Angular major version (e.g. @primeng/themes for PrimeNG 19–21).

Compatibility

| Consumer Angular | Required PrimeNG | This library | |------------------|------------------|--------------| | 19.x | 19.x | 1.x | | 20.x | 20.x | 1.x | | 21.x | 21.x | 1.x |

Rule: Use the same major version for Angular and PrimeNG (e.g. Angular 20 + PrimeNG 20).

Peer dependencies

• @angular/common >= 19
• @angular/core >= 19
• @angular/forms >= 19
• primeng >= 19
• libphonenumber-js >= 1.10

Usage

import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
import { InputText } from 'primeng/inputtext';
import {
  PhoneInputComponent,
  phoneValidator,
} from 'ngx-primeng-phone-input';

@Component({
  standalone: true,
  imports: [ReactiveFormsModule, InputText, PhoneInputComponent],
  template: `
    <ngx-phone-input
      pInputText
      fluid
      [defaultCountryIso]="'IN'"
      [phoneValidation]="true"
      [formControl]="phoneControl">
    </ngx-phone-input>
  `,
})
export class AppComponent {
  phoneControl = new FormControl(null, [
    Validators.required,
    phoneValidator,
  ]);
}

Apply pInputText on the host element so PrimeNG styles the field like a standard text input.

Reactive Forms validator

import { phoneValidator } from 'ngx-primeng-phone-input';

phone = new FormControl(null, [Validators.required, phoneValidator]);

Output value shape

interface PhoneInputValue {
  country: Country;
  number: string;
  internationalNumber: string;
  e164: string;
  e164Number: string; // alias of e164 (ngx-intl-tel-input compat)
}

Use e164 in API payloads.

Inputs

| Input | Type | Default | Description | |-------|------|---------|-------------| | defaultCountryIso | string | 'KW' | Pre-selected country ISO2 | | preferredCountryIsos | string[] | GCC + IN | Countries pinned at top | | placeholder | string | '' | Custom placeholder | | maxLength | number | per-country | Max digit cap | | phoneValidation | boolean | false | Enable inline validation | | enableFormatting | boolean | false | AsYouType formatting | | inputClass | string | '' | Extra classes on inner input | | name | string | '' | name attribute | | autocomplete | string | 'off' | autocomplete attribute | | searchCountryFlag | boolean | true | Show search box | | enablePlaceholder | boolean | true | Show placeholder | | selectFirstCountry | boolean | false | Auto-highlight first result | | enableAutoCountrySelect | boolean | false | Auto-detect country from digits | | lang | string | 'en' | Language for country names | | searchPlaceholder | string | 'Search country...' | Search input placeholder | | noCountriesText | string | 'No countries found' | Empty state text |

Features

• PrimeNG-native styling via pInputText and CSS design tokens
• Dark mode support (.p-dark or [data-p-theme='dark'])
• GCC-region aware preferred countries (Kuwait, UAE, Saudi, Bahrain, Qatar, Oman, India)
• libphonenumber-js validation — no stale regex
• ControlValueAccessor — works with Reactive Forms and ngModel
• Standalone Angular component (19+)

License

MIT