Validation

Overview

The Angular component plugs into ReactiveFormsModule as a custom form control and ships with a built-in validator that checks phone numbers by length (sufficient for most use cases — enable usePreciseValidation for stricter matching).

Validation respects the allowedNumberTypes option, which is set to ["MOBILE", "FIXED_LINE"] by default, meaning it will only consider those types of numbers as valid.

When a number fails validation, the form control's errors["invalidPhone"] contains the error code, which you can then map to your own custom error message — see Show a user-facing error message.

Note: the red/green styling and warning/success icons are not part of the component — in this example they come from Bootstrap form validation.

Note: the toast shown when input is rejected isn't part of the library — see the strictReject event docs for an example of how to wire one up yourself.

JavaScript

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

@Component({
  selector: "#app",
  template: `
    <form [formGroup]="fg" (ngSubmit)="handleSubmit()">
      <label for="phone">Phone number</label>
      <intl-tel-input
        formControlName="phone"
        [inputAttributes]="{ id: 'phone' }"
        [initialCountryLookup]="initialCountryLookup"
        [loadUtils]="loadUtils"
      />
      <button type="submit">Submit</button>
      @if (invalidMsg) {
        <div class="invalid-feedback d-block">{{ invalidMsg }}</div>
      }
      @if (validMsg) {
        <div class="valid-feedback d-block">{{ validMsg }}</div>
      }
    </form>
  `,
  standalone: true,
  imports: [IntlTelInput, ReactiveFormsModule],
})
export class AppComponent {
  showValidation = false;
  submitted = false;

  loadUtils = () => import("intl-tel-input/utils");

  initialCountryLookup = async () => {
    const res = await fetch("https://ipapi.co/json");
    const data = await res.json();
    return data.country_code;
  };

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

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

  get invalidMsg() {
    if (!this.showValidation || this.phone?.valid) return null;
    const errorCode = this.phone.errors?.["invalidPhone"] ?? null;
    // your code here to map the errorCode to a user-facing message
    return getErrorMessage(this.phone.value, errorCode);
  }

  get validMsg() {
    const showValid =
      this.showValidation && this.phone?.valid && this.submitted;
    return showValid ? `Full number: ${this.phone.value}` : null;
  }

  handleSubmit() {
    this.showValidation = true;
    this.submitted = true;
  }
}