Form

KeyFilter

Only allowed characters get into a field — typing is blocked, pasted text is cleaned.

Features4

API

Theming

Presets

Common presets. Try typing letters into the number fields.

pint

int

pnum

num

money

hex

email

alpha

alphanum

15 lines

<div class="grid">  @for (preset of presets; track preset) {    <div class="grid__item">      <tx-label [for]="'key-filter-preset-' + preset"        ><code>{{ preset }}</code></tx-label      >      <input        txInput        [id]="'key-filter-preset-' + preset"        [fluid]="true"        [txKeyFilter]="preset"      />    </div>  }</div>

More presets

latin (+ extra characters), positive (one decimal separator) and nospace.

16 lines

<tx-fluid class="stack">  <input    txInput    [txKeyFilter]="'latin'"    [keyFilterExtra]="'-_'"    placeholder="Latin, - and _ only"    aria-label="Latin"  />  <input    txInput    [txKeyFilter]="'positive'"    placeholder="Positive number, one separator"    aria-label="Positive"  />  <input txInput [txKeyFilter]="'nospace'" placeholder="No spaces" aria-label="No spaces" /></tx-fluid>

Regexp

Any RegExp that one character must match.

Validate only

Nothing is blocked; the form gets a keyFilter error instead.

Errors: none

11 lines

<tx-fluid class="stack">  <input    txInput    [txKeyFilter]="'alphanum'"    [validateOnly]="true"    [formControl]="code"    placeholder="Type a space or a dash"    aria-label="Code"  />  <span class="hint">Errors: {{ code.errors ? 'keyFilter' : 'none' }}</span></tx-fluid>