Masked Input

PacemMaskInputElement is meant for fixed-shape values typed character by character: phone numbers, IBANs, expiry dates, plates... Literals get written for you, and characters a slot does not accept are refused. An empty field shows its placeholder; set placeholder-char (e.g. _) for a ghost of what is left to type.

The mask pattern:

• 9 a digit, a a letter, * a letter or a digit, A/z a letter stored upper/lower case;
• […] a character class (regex syntax: [0-1], [A-F0-9]), {n} repeats the previous slot n times, \x the literal x;
• any other character is a literal: [0-9]{2}\/[0-9]{2} and 99/99 are the same mask.

The value is the formatted text (12/26), also while incomplete; complete tells whether every slot is filled. Typing in the middle shifts what follows; paste accepts formatted, raw or differently separated texts.

Autogenerated

PacemMaskInputElement can be autogenerated using the mask ui hint, with the pattern in display.format; a regex validator checks the complete shape (Compile.Mask.toRegExp() gives the regex of any mask).

[ {"prop": "expiry", "type": "string", "display": { "name": "Expiry date", "ui": "mask", "watermark": "MM/YY", "cssClass": ["field-outline"] }, "extra": {"mask": "[0-1]9/99" }, "validators": [{ "type": "regex", "errorMessage": "Incomplete", "params": { "pattern": "^[0-1][0-9]/[0-9]{2}$" } }] } ]