CngxPasteTransform
projects/forms/input/paste-transform.directive.ts
Import#
import { CngxPasteTransform } from '@cngx/forms/input'
Description#
Sanitizes pasted content before it enters the field.
Place on the <input> or <textarea>. On paste it reads the clipboard
text, runs your transform (strip rich formatting, normalize separators,
trim), cancels the native paste, inserts the cleaned text at the caret
(replacing any selection), and dispatches a native input event so the bound
[field] / CngxInput sees the result through the existing DOM->signal path.
One behaviour, one directive (Pillar 3); the synthetic input dispatch feeds
the existing one-way path, no second managed copy.
Do not stack with CngxInputMask on the same element: both directives
cancel the native paste and write the field independently, so the clipboard
text is inserted twice through two uncoordinated paths (this directive
writes el.value directly, the mask routes the untransformed clipboard
text through its slot filter). Masks already filter per slot and accept a
per-character transform; use those instead.
<input cngxInput [cngxPasteTransform]="stripSpaces" />
<!-- component: stripSpaces = (s: string) => s.replace(/\s+/g, '') -->