Input Mask

Directive [dgInputMask] — định dạng input theo pattern khi user gõ. Token: 9 = digit, a = letter, * = chữ/số. Ký tự khác là separator literal, tự fill khi user gõ.

Tokens

TokenMatchVí dụ
9Digit 0–999/99/9999
aLetter A–Z a–zaaa-9999
*Alphanumeric***-***
khácLiteral(999) 999-9999

Slot mode — click vào đúng vị trí để sửa

Bật bằng dgInputMaskSlot="_" (hoặc bất kỳ ký tự đơn nào). Khi focus, input fill template __/__/____. Click vào bất kỳ slot nào để đặt cursor; gõ → ghi đè đúng slot; Backspace / Delete → khôi phục slot char. Kéo chọn → ghi đè cả vùng.

Date — 99/99/9999

Thử gõ 1101 → 11/01; 32a13b2024 → 32/13/2024.

Phone

Credit card & CVV

Letter + digit (license plate)

Network — IPv4 / IPv6 fragment

VN-specific — CCCD & tax code

Two-way binding (signal)

value (masked): —

Reactive form (CVA) — masked string + Validators

FormControl nhận chuỗi đã mask (kèm separator). Tự viết validator regex để check đủ ký số. Đây là pattern thường dùng để validate ngày / điện thoại / CCCD.

control.value: —

Snippet

// 1. Append mode (default) — gõ tuần tự
<input dgInputMask="99/99/9999" placeholder="dd/MM/yyyy" />

// 2. Slot mode — click vào slot để sửa
<input dgInputMask="99/99/9999" dgInputMaskSlot="_" />
// hiển thị "__/__/____", overwrite tại cursor

// 3. Với form control
<input dgInputMask="9999 999 999" [formControl]="phoneCtrl" />
phoneCtrl.value // → "0901 234 567"  (masked với separator)

// 4. Bind ngModel
<input dgInputMask="(999) 999-9999" [(ngModel)]="phone" />

// 5. Tokens hỗn hợp
<input dgInputMask="99-aa 999.99" />  // 29-A1 123.45

// 6. Validator pattern (regex match masked output)
new FormControl('', [
  Validators.pattern(/^\d{4} \d{3} \d{3}$/)
])