Phone field on Angular Signal Forms
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…
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.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
