TelixonPhoneInput

A directive with the selector input[telixonPhoneInput], exported as telixonPhoneInput. Once the engine has loaded, the directive attaches a PhoneInput to the element and registers itself as the form control’s value accessor and validator. Until then the element is a plain input. On the server it stays a plain input.

<input #phone="telixonPhoneInput" [telixonPhoneInput]="options" [formControl]="control" />

Options

[telixonPhoneInput] takes a TelixonPhoneInputOptions. That type is the PhoneInputOptions of createPhoneInput without input and initialValue. A bare telixonPhoneInput attribute means { mode: 'international' }.

When the options change, new regionFilter and numberTypeFilter values go to the existing widget. Any other change replaces the widget. A valid number is carried over to the new widget as it is. Any other text stays in the input, where the new widget reads it. A field that holds only a calling code starts over. A new defaultRegion then seeds its own calling code.

Form value

The control holds the number in E.164 while the number is valid and null at any other time. The control turns dirty on the first edit, the way any input does.

A value written by the form shows in the input the way the field formats numbers. With the calling code outside the input, +442071838750 shows as 20 7183 8750, with the United Kingdom as the region. In a national field the same value shows as 020 7183 8750. With the calling code inside the input it shows as 44 20 7183 8750. A write leaves the control pristine. A value written before the engine has loaded shows unformatted until the field is live.

Validation

An invalid number reports its ValidationError under telixonPhone:

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

A field with no digits after the calling code reports no error. Emptiness is left to Validators.required. The seeded calling code of an untouched field counts as no digits. A number that is valid without its trunk prefix, such as 2071838750 in a national United Kingdom field, reports no error either. The widget’s own state still carries the NATIONAL_PREFIX_MISSING hint for it.

The validator runs again whenever the fault changes while the value stays null. A form therefore moves from TOO_SHORT to TOO_LONG as the user keeps typing.

The input element

type="tel" shows the phone keypad on iOS and Android. autocomplete="tel" lets the browser fill the number from the user’s profile. An autofilled value reaches the field as one input event and is read like a paste. Keep the input’s font size at 16 px or larger, because iOS Safari zooms into a smaller field on focus. enterkeyhint="done" labels the keyboard’s action key on the last field of a form. Leave maxlength off, because Chrome fills a national number without its country code into a field that is too short for the whole number.

The input keeps its native textbox role and the label you give it. Formatting makes no announcement of its own. A screen reader reads the current value when the field takes focus.

Members

options

readonly options: InputSignalWithTransform<TelixonPhoneInputOptions, TelixonPhoneInputOptions | ''>;

The options the field runs with.

phone

readonly phone: Signal<PhoneInput | null>;

The web-sdk widget behind the field, null until the engine has loaded. The signal changes when new options replace the widget. A picker linked through [for] follows that change.

state

readonly state: Signal<PhoneInputState | null>;

The field’s latest PhoneInputState, null until the engine has loaded.

disabled

readonly disabled: Signal<boolean>;

Whether the form has disabled the control.

element

readonly element: HTMLInputElement;

The input the directive sits on.

focus

focus(options?: FocusOptions): void;

Moves focus into the field.

The engine

The directive calls ensureEngineReady after the first render. A failed load reports to ErrorHandler. provideTelixon starts the load earlier, right after the application’s first render.