Form

InputMask

Formats a field as you type — phones, dates, cards and codes.

Features10

API

Theming

Phone

9 is a digit. Brackets, spaces and dashes are typed for you.

Value: —

8 lines

<input  txInput  txInputMask="+380 (99) 999-99-99"  placeholder="+380 (__) ___-__-__"  aria-label="Phone"  [(ngModel)]="phone"/><p class="hint">Value: {{ phone || '—' }}</p>

Date

A date mask; inputmode="numeric" opens the number keyboard on phones.

Card

Card number and expiry. (completed) fires when the required part is filled.

Type 16 digits

19 lines

<div class="row">  <input    txInput    txInputMask="9999 9999 9999 9999"    inputmode="numeric"    placeholder="Card number"    aria-label="Card number"    (completed)="card.set($event)"  />  <input    txInput    txInputMask="99/99"    inputmode="numeric"    placeholder="MM/YY"    aria-label="Expiry"    class="short"  /></div><p class="hint">{{ card() ? 'Card: ' + card() : 'Type 16 digits' }}</p>

Letters

a is a letter, * a letter or a digit. characterPattern changes what a accepts — here Cyrillic as well.

10 lines

<div class="row">  <input    txInput    txInputMask="aa 9999 aa"    placeholder="AA 1234 BB"    aria-label="Plate"    characterPattern="[A-Za-zА-Яа-яІіЇїЄєҐґ]"  />  <input txInput txInputMask="****-****" placeholder="Licence key" aria-label="Licence key" /></div>

Optional

Everything after ? is optional — the value is complete without it.

Value: —

8 lines

<input  txInput  txInputMask="(999) 999-9999? x99999"  placeholder="Phone with extension"  aria-label="Phone with extension"  [(ngModel)]="value"/><p class="hint">Value: {{ value || '—' }}</p>

Unmask

unmask writes only the typed characters to the model — handy for APIs. The field still shows the mask.

Model: 12345678

Slot char

slotChar is shown in empty positions while the field has focus — one character, or a whole hint of the same length.

10 lines

<div class="row">  <input    txInput    txInputMask="999-999"    slotChar="#"    placeholder="Hash slots"    aria-label="Hash slots"  />  <input txInput txInputMask="99:99" slotChar="·" placeholder="Time" aria-label="Time" /></div>

Auto clear

By default an incomplete value is cleared on blur. [autoClear]="false" keeps what was typed.

15 lines

<div class="row">  <input    txInput    txInputMask="9999-9999"    placeholder="Clears when incomplete"    aria-label="Clears when incomplete"  />  <input    txInput    txInputMask="9999-9999"    [autoClear]="false"    placeholder="Keeps partial input"    aria-label="Keeps partial input"  /></div>

Clear

With tx-icon-field, tx-input-clear empties the masked field.

Form

Inside tx-field with Validators.required — incomplete values are cleared on blur, so the required error shows.

Phone

We call only about your order.

12 lines

<div class="form">  <tx-field label="Phone" [required]="true" hint="We call only about your order.">    <input      txInput      txInputMask="+380 (99) 999-99-99"      inputmode="tel"      [formControl]="phone"      [fluid]="true"    />  </tx-field>  <button txButton (click)="phone.markAsTouched()">Order</button></div>