Angular component

This project includes an official Angular component alongside the original JavaScript plugin. It supports all of the same features, including the country picker, formatting, and validation, and comes with TypeScript type definitions included. View all of the supported props in the Angular component docs.

Below is a live demo and example code demonstrating ReactiveFormsModule integration, validation (on blur/submit), and error messaging. For more patterns and use cases, explore the Angular demos.

JavaScript

import { Component, ViewChild } from "@angular/core";
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from "@angular/forms";
import { IntlTelInputComponent } from "intl-tel-input/angular";
import "intl-tel-input/styles";

@Component({
  selector: "#app",
  template: `
    <form [formGroup]="fg" (ngSubmit)="handleSubmit()">
      <intl-tel-input
        #telInput
        formControlName="phone"
        name="phone"
        [initOptions]="initOptions"
      />
      <button type="submit">
        Validate
      </button>
      <div class="notice">
        @if (phone?.errors?.["required"] && phone?.touched) {
          Please enter a number
        } @else if (phone?.errors?.["invalidPhone"] && phone?.touched) {
          {{ phone?.errors?.["invalidPhone"].errorMessage }}
        } @else if (notice) {
          {{ notice }}
        }
      </div>
    </form>
  `,
  standalone: true,
  imports: [IntlTelInputComponent, ReactiveFormsModule],
})
export class AppComponent {
  @ViewChild("telInput") telInput!: IntlTelInputComponent;

  initOptions = {
    initialCountry: "us",
    loadUtils: () => import("intl-tel-input/utils"),
  };

  fg: FormGroup = new FormGroup({
    phone: new FormControl<string>("", [Validators.required]),
  });

  notice: string | null = null;

  get phone() {
    return this.fg.get("phone");
  }

  handleSubmit(): void {
    this.phone?.markAsTouched();
    if (this.fg.valid) {
      this.notice = `Valid number: ${this.telInput.getInstance()?.getNumber()}`;
    }
  }
}