PhoneInputComponent

A powerful Angular phone input component with international country selection, automatic formatting, and validation.

Part of ngx-dial-input library. See main README for general information.

Component Inputs

| Input | Type | Default | Description | |-------|------|---------|-------------| | defaultCountry | string | '' | ISO 2-letter country code (e.g., 'US', 'GB', 'IN') | | placeholder | string | '' | Placeholder text in the phone input field | | searchEnabled | boolean | true | Enable/disable country search in dropdown | | numberFormat | 'international' \| 'national' | 'international' | Phone number format: +12015551234 (international) or 2015551234 (national) | | setFirstCountry | string | '' | Pre-select a specific country |

Component Output

phoneChange Event

Emitted when phone value changes:

interface PhoneData {
  e164Number: string;       // '+12015551234' - International format for storage
  nationalNumber: string;   // '2015551234'   - Just the digits
  dialCode: string;         // '+1'           - Country dial code
  countryCode: string;      // 'us'           - ISO 2-letter code (lowercase)
  isValid: boolean;         // true/false     - Validation status
}

Usage Example

Reactive Forms

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { PhoneInputModule } from 'ngx-dial-input';

@Component({
  selector: 'app-contact-form',
  template: `
    <form [formGroup]="form" (ngSubmit)="submit()">
      <div class="form-group">
        <label>Phone Number</label>
        <phone-input
          [defaultCountry]="'US'"
          [placeholder]="'Enter phone number'"
          [searchEnabled]="true"
          formControlName="phone"
          (phoneChange)="onPhoneChange($event)">
        </phone-input>
        <small *ngIf="form.get('phone').invalid && form.get('phone').touched">
          Please enter a valid phone number
        </small>
      </div>
      <button type="submit" [disabled]="form.invalid">Submit</button>
    </form>
  `,
  standalone: false
})
export class ContactFormComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      phone: [null, Validators.required]
    });
  }

  onPhoneChange(data: any) {
    if (data.isValid) {
      console.log('Valid phone (e164):', data.e164Number);
    }
  }

  submit() {
    const phoneData = this.form.get('phone').value;
    console.log('Phone to save:', phoneData.e164Number);
    // API call to save phone
  }
}

With Default Country

<phone-input
  [defaultCountry]="'GB'"
  [setFirstCountry]="'GB'"
  [numberFormat]="'national'"
  formControlName="phone">
</phone-input>

Validation Behavior

Empty Input

• Initial state with no input: isValid = false (but no validation error)
• Allows users to leave the field empty until they start typing

Partial Input

• Once user starts typing, validates against country's minimum length
• Phone with insufficient digits: isValid = false

Complete Input

• Phone matching country's required length: isValid = true
• Phone exceeding max length: isValid = false

Length Rules Used by the Component

• Validation checks minLength and maxLength from each country entry.
• phoneLength remains in the data model as a compatibility/reference field.
• Current runtime validity decisions are not based on phoneLength.

Syria Example

Country: Syria (min: 9 digits, max: 10 digits)
- 8 digits: isValid = false
- 9 digits: isValid = true
- 10 digits: isValid = true
- 11 digits: isValid = false

Example

Country: United States (min: 10 digits, max: 10 digits)
- Empty (no input): isValid = false, no error
- Entering: '201' (3 digits): isValid = false, too short
- Complete: '2015551234' (10 digits): isValid = true
- Excess: '20155512345' (11 digits): isValid = false, too long

Supported Features

✅ 200+ Countries with:

• Dial codes
• Flag images
• Min/max phone length
• Format patterns

✅ Smart Search

• Search by country name
• Case-insensitive matching
• Fast filtering

✅ Animations

• Smooth dropdown open/close
• Responsive to user interactions

✅ Keyboard Support

• Arrow keys to navigate
• Enter to select
• Escape to close dropdown

✅ ControlValueAccessor

• Works with formControlName
• Works with [(ngModel)]
• Works with Reactive Forms and Template Forms

Building & Testing

# Build the library
ng build phone-input

# Run unit tests
ng test phone-input --watch

# Run tests (CI mode, no watch)
ng test phone-input --watch=false --browsers=ChromeHeadless

# Create distributable package
npm run build

Output Structure

After building:

dist/
  phone-input/
    lib/
      phone-input.component.d.ts
      phone-input.module.d.ts
    package.json
    README.md
    LICENSE
    phone-input.d.ts  (public API)

Browser Compatibility

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

Performance

• Component uses OnPush change detection
• Optimized country list filtering
• Minimal re-renders

Accessibility

• Semantic HTML structure
• Keyboard navigation support
• ARIA labels on country selector

Contributing

Issues and PRs are welcome on GitHub

License

MIT © CroemInc