{
  "id": 12696649,
  "title": "Phone field on Angular Signal Forms",
  "url": "https://urgent.news/2026/10/07/phone-field-on-angular-signal-forms",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-10-07T19:42:24.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/myroslavmartsin/phone-field-on-angular-signal-forms-2ohh"
  },
  "original_language": "en",
  "account": "Signal Forms became stable in Angular 22, introducing FormValueControl which allows custom controls to pass values and error lists to the form. A phone field is an example of such a control, where the user input and model value differ. Parsing, formatting, and validation occur for the phone number, which is then stored in E.164 format in the model. Angular Material adds another layer of complexity, requiring a custom component to implement MatFormFieldControl. This post walks through creating a phone field using Telixon's Angular package, which provides a TelixonPhoneField directive and TelixonRegionPicker for flags and country lists. The field is initially set up as a bare input in a Signal Form, with the input displaying the formatted phone number and the model storing the E.164 version. Validation is handled through the schema, with required and error messages displayed as needed. Finally, the same field is integrated into Angular Material, using MatFormFieldControl and MatInputModule to style the field.",
  "summary": "Signal Forms went stable in Angular 22. They bring FormValueControl , a contract where a custom control hands the form a value and a list of errors. A toggle or a stepper meets it in a few lines. The real test is a control whose input text and model value are two different things. A phone field is such a control. The user types 4155550132 . The input shows (415) 555-0132 while the model stores…",
  "key_points": [
    "Signal Forms introduced in Angular 22 with FormValueControl",
    "Phone field example of custom control with formatted E.164 model value",
    "Telixon package provides TelixonPhoneField directive and region picker"
  ],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}