NEURALNG
COMPONENTBETA

InputMask

A deterministic masked text control with caret-aware editing, Unicode slots, every Angular Forms API and complete visual ownership.

Paste awareSignal Forms readyIME safe

GET STARTED

Import

Import the canonical standalone component from its granular entry point.

app.ts TypeScript
import { NeuralInputMask } from '@neural-ng/core/input-mask';

@Component({ imports: [NeuralInputMask] })

Basic phone mask

The model is formatted by default while the native input receives telephone keyboard and autofill hints.

Model: Empty

Mask grammar

9 accepts ASCII digits, a accepts Unicode letters and * accepts Unicode letters or numbers. Escape a rule with a backslash.

Formatted and raw models

Add unmask when your domain stores only slot characters. Semantic completion events always include model, raw and formatted values.

Raw model: EmptyComplete and incomplete events appear here.

Editing and incomplete policy

Paste, Backspace, Delete, selections and caret position stay aligned to logical mask slots. This example clears a partial value when focus leaves.

Paste mixed text or leave the value incomplete and blur.

Angular Forms integration

Signal Forms, Reactive Forms and template-driven Forms use the same FormValueControl<string> contract.

Empty
(212) 555-0198
(312) 555-0107

States and Field composition

Field supplies labels, descriptions and shared disabled, readonly, required, invalid, pending, fluid and unstyled state.

Two letters followed by four digits.Enter the complete employee code.

Native input configuration

Name, ID, autocomplete, input mode, placeholder and accessibility metadata are forwarded to the real text input. The mask never replaces domain validation.

Unstyled and typed class slots

Unstyled removes NeuralNg visual classes while retaining the native input, mask engine, Forms behavior and stable structural hooks.