Masked Input

Guide fixed-format entry while keeping Angular forms validation and a choice of raw or formatted model values.

Import NgbMaskedInputComponent and ReactiveFormsModule. Bind a FormControl<string | null> and provide a fixed mask.

Fixed masks

The following example demonstrates a payment reference and a fixed ten-digit contact number. Paste raw or formatted text. An incomplete value is invalid; an invalid character stays visible for correction.

Payment reference

Two letters and six digits, such as TR-004218. The raw model excludes the dash.

Raw model: TR004218

Contact number

Fixed ten-digit example; no country detection or telephone-number verification.

Formatted model: (202) 555-0142

      import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { NgbMaskedInputComponent } from '@angular-bootstrap/ngbootstrap';

@Component({
  standalone: true,
  imports: [ReactiveFormsModule, NgbMaskedInputComponent],
  template: `<ngb-masked-input label="Payment reference" mask="AA-000000"
    [formControl]="reference" [required]="true" />`,
})
export class PaymentForm {
  readonly reference = new FormControl<string | null>('TR004218');
}

Mask grammar

0: one ASCII digit (0–9).
A: one ASCII letter (a–z or A–Z).
*: one ASCII letter or digit.
Other characters are literals. Escape a token with a backslash to display it literally.

All slots are required when the field has a value. Empty input is null; add required to reject it. Use valueMode="raw" (default) to exclude literals, or formatted to include them. Write external model values in the selected mode. A mask must contain an editable slot and be at most 256 characters.

Keyboard and validation

Typing, selection replacement and paste normalize the displayed mask. Backspace and Delete skip literals to remove an editable character. Tab retains native focus behavior. IME composition is buffered until it ends, then checked against the ASCII grammar.

Partial matching text updates the model but remains invalid. Invalid characters or excess input keep the prior model and mark the control invalid. Check form validity before saving; a mask checks shape, not whether an account, reference or phone number exists.

Limitations

Fixed masks validate format only. Dynamic masks and country detection are not supported; validate identifiers in your application. Use Numeric Input for amounts and rates.

Accessibility overview · WAI-ARIA support