Display formatting on blur, raw value on focus
CngxInputFormat
DirectivePrimaryv0.1.0WCAG AA
projects/forms/input/input-format.directive.ts
Import#
import { CngxInputFormat } from '@cngx/forms/input'
Description#
Display formatting on blur, raw value on focus.
Applies a format function when the input loses focus and a parse function
when it gains focus. The directive's value model carries the raw
(unformatted) value; bind it via [(value)] or wrap the input in
<cngx-form-field [field]="f.x"> for Signal Forms.
<!-- Currency formatting -->
<input [cngxInputFormat]="formatCurrency" [parse]="parseCurrency" [(value)]="amount" />
<!-- Phone formatting inside a Signal-Forms field -->
<cngx-form-field [field]="f.phone">
<input cngxInputFormat="formatPhone" cngxBindField [control]="f.phone" />
</cngx-form-field>Metadata#
Host#
Providers#
CNGX_VALUE_TRANSFORMER- useFactory
(dir: CngxInputFormat): CngxValueTransformerdeps:=> ({ format: (raw: string) => dir.format()(raw), parse: (display: string) => dir.parse()(display), }) forwardRef(() => CngxInputFormat)