Skip to content
Telixon

Use it with Angular Material

TelixonPhoneInput shares one <input> with matInput. The picker goes into the form field as a text prefix. Material’s floating label, outline notch, and error state follow the field.

Live demo

Section titled “Live demo”

Pick the United Kingdom and type 2071838750. The label floats and the field shows 20 7183 8750, while the control holds +442071838750. Leave the field after 2071 and Material shows the error.

The code

Section titled “The code”

The demo runs the component and the stylesheet shown below. In the component, matTextPrefix places the picker on the text line of the form field. anchor=".mdc-text-field" names the box Material draws around the field. The list lines up with that box. The telixonPhone check comes before the required check, for the reason Build a phone field gives. The stylesheet carries the Material theme, the flags, and one rule that strips the trigger’s border and seats it on the text line inside the form field. That rule belongs in the global styles, because component styles do not reach the picker.

contact.ts
import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { TelixonPhoneInput, TelixonRegionPicker, type ValidationError } from '@telixon/angular';


@Component({
  selector: 'app-contact',
  imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule, TelixonPhoneInput, TelixonRegionPicker],
  template: `
    <mat-form-field appearance="outline">
      <mat-label>Phone</mat-label>


      <telixon-region-picker matTextPrefix [for]="phone" anchor=".mdc-text-field" [prioritize]="['US', 'CA', 'GB']" />


      <input
        matInput
        type="tel"
        autocomplete="tel"
        #phone="telixonPhoneInput"
        [telixonPhoneInput]="{ mode: 'international', defaultRegion: 'US', display: { callingCodeInInput: false } }"
        [formControl]="control"
        [placeholder]="phone.state()?.placeholder ?? ''"
      />


      @if (control.hasError('telixonPhone')) {
        <mat-error>{{ message(control.getError('telixonPhone')) }}</mat-error>
      } @else if (control.hasError('required')) {
        <mat-error>Phone number is required.</mat-error>
      }


      <mat-hint>Pick the country, then type the number.</mat-hint>
    </mat-form-field>
  `,
})
export class Contact {
  readonly control = new FormControl<string | null>(null, Validators.required);


  message(fault: ValidationError): string {
    switch (fault.kind) {
      case 'TOO_SHORT':
      case 'POSSIBLE_LOCAL_ONLY':
        return 'This number is too short.';
      case 'TOO_LONG':
        return 'This number is too long.';
      default:
        return 'This number does not exist.';
    }
  }
}