Use it with Signal Forms

@telixon/angular 22 adds TelixonPhoneField, the phone field for Signal Forms. [formField] binds it the way it binds any custom control. The user types into the input and sees a formatted number. The field holds the same number in E.164 while the number is valid and null at any other time.

The field

contact.ts

import { Component, signal } from '@angular/core';
import { FormField, form, required } from '@angular/forms/signals';
import { TelixonPhoneField, TelixonRegionPicker } from '@telixon/angular';

@Component({
  selector: 'app-contact',
  imports: [FormField, TelixonPhoneField, TelixonRegionPicker],
  template: `
    <telixon-region-picker [for]="phone" [prioritize]="['US', 'CA', 'GB']" />

    <input
      type="tel"
      autocomplete="tel"
      #phone="telixonPhoneField"
      [telixonPhoneField]="{ mode: 'international', defaultRegion: 'US', display: { callingCodeInInput: false } }"
      [formField]="contactForm.phone"
      [placeholder]="phone.state()?.placeholder ?? ''"
      [attr.aria-invalid]="contactForm.phone().touched() && contactForm.phone().invalid() ? true : null"
      aria-describedby="phone-error"
    />

    @if (contactForm.phone().touched() && contactForm.phone().invalid()) {
      <p id="phone-error">{{ contactForm.phone().errors()[0]?.message }}</p>
    }
  `,
})
export class Contact {
  readonly model = signal<{ phone: string | null }>({ phone: null });
  readonly contactForm = form(this.model, (schema) => {
    required(schema.phone, { message: 'Phone number is required.' });
  });
}

The input shows the placeholder 201-555-0123. After typing 4155550132 the input shows 415-555-0132 while the model holds +14155550132. The picker links to the field through [for], as Add a region picker shows for TelixonPhoneInput.

Show the errors

An invalid number reaches errors() as a parse error of kind telixonPhone. Its message is ready to show and its fault is the ValidationError behind it. The schema’s required covers the empty field. The template above shows the first message once the field is touched. To change the text, give errorMessage a function that turns the fault into your own message.

Follow the schema

The schema’s disabled, readonly, and required rules are set on the input element. A form reset discards partial text, shows the field’s value again, and clears the undo history. The reference lists every member.

Inside Angular Material

The directive sits on the same <input> as matInput, as Use it with Angular Material shows for TelixonPhoneInput. Material reads the field’s state through Signal Forms, which gives you the floating label, the required marker, aria-invalid, and mat-error without extra code:

<mat-form-field appearance="outline">
  <mat-label>Phone</mat-label>
  <input matInput type="tel" telixonPhoneField [formField]="contactForm.phone" />
  @if (contactForm.phone().touched() && contactForm.phone().invalid()) {
    <mat-error>{{ contactForm.phone().errors()[0]?.message }}</mat-error>
  }
</mat-form-field>

The quick start runs this field on StackBlitz.