CngxCapsLock
projects/forms/input/caps-lock.directive.ts
Import#
import { CngxCapsLock } from '@cngx/forms/input'
Description#
Caps-lock warning for password and other case-sensitive fields.
Place on the <input>. Reads KeyboardEvent.getModifierState('CapsLock')
on every keystroke, drives a capsOn signal, and announces the warning
exactly once on the off->on edge through the shared CngxLiveAnnouncer
(assertive, so a screen-reader user hears it while typing). Detection needs
a key event - the modifier state is unreadable from a FocusEvent, so the
warning surfaces on the first keystroke after focus and clears on blur.
The directive owns the screen-reader channel; the visible warning is
consumer-rendered from capsOn so the skin stays the consumer's. The
announced string flows through the CNGX_INPUT_CONFIG.ariaLabels.capsLockOn
cascade and is English by default.
<input cngxInput cngxCapsLock #caps="cngxCapsLock" type="password" />
@if (caps.capsOn()) {
<span class="hint">Caps Lock is on</span>
}