Skip to main content
cngx-src documentation

CngxPasteTransform

DirectivePrimaryv0.2.0WCAG AA

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, '') -->

https://cngxjs.github.io/cngx/examples/#/forms/input/paste-sanitize

Metadata#

Host#

Index#

HostListeners

Inputs#

transform#(pasted: string) => string
Required

Transform applied to the pasted text before insertion.

default { alias: 'cngxPasteTransform' }

HostListeners#

EventHandler
(paste)paste()