CngxInput

[cngxInput]

DirectivePrimaryv0.1.0WCAG AA

projects/forms/input/input.directive.ts

Import#

import { CngxInput } from '@cngx/forms/input'

Description#

Applies ARIA attributes and focus tracking to a native input, textarea, or select inside a cngx-form-field.

Provides CNGX_FORM_FIELD_CONTROL so the parent form field can discover it. Works standalone (without cngx-form-field) as a no-op - no crash.

<input cngxInput />

https://cngxjs.github.io/cngx/examples/#/forms/input/character-counter https://cngxjs.github.io/cngx/examples/#/forms/input/password-visibility-toggle https://cngxjs.github.io/cngx/examples/#/forms/input/smart-autocomplete-and-spellcheck

Metadata#

Selector: input[cngxInput], textarea[cngxInput], select[cngxInput]
Export as: cngxInput
Implements: CngxFormFieldControl

Host#

Static attributes: [id]inputId()
[attr.aria-describedby]describedBy()
[attr.aria-labelledby]labelledBy()
[attr.aria-invalid]ariaInvalid()
[attr.aria-required]ariaRequired()
[attr.aria-busy]ariaBusy()
[attr.aria-errormessage]ariaErrorMessage()
[attr.aria-readonly]ariaReadonly()
[attr.disabled]isDisabled()
[attr.autocomplete]resolvedAutocomplete()
[attr.spellcheck]resolvedSpellcheck()
Bound classes: cngx-input--error ← errorState cngx-input--focused ← focused
Listeners: focus → handleFocus blur → handleBlur input → handleInput

Providers#

CNGX_FORM_FIELD_CONTROL: useExisting CngxInput

Relationships

Used by2

componentCngxFilterExpressionRowEmbedded expression-row sub-component.

componentCngxFilterRowStandalone single-row filter surface.

Depends on1

CNGX_FORM_FIELD_CONTROLservice

Index#

Inputs#

autocomplete#string | undefined

input()

Explicit autocomplete value. When not set, inferred from the field name (e.g. email → autocomplete="email", password → autocomplete="current-password"). Set to 'off' to disable.

spellcheck#boolean | undefined

input()

Explicit spellcheck value. When not set, auto-disabled for fields like email, password, URL, phone, codes.

Instance Properties#

empty#unknown

Readonly

this.emptyState.asReadonly()

focused#unknown

Readonly

this.focusedState.asReadonly()

Methods#

focus#void

focus(options?: FocusOptions)

@paramoptions?FocusOptions

HostBindings#

Binding	Expression
`[id]`	`inputId()`
`[attr.aria-describedby]`	`describedBy()`
`[attr.aria-labelledby]`	`labelledBy()`
`[attr.aria-invalid]`	`ariaInvalid()`
`[attr.aria-required]`	`ariaRequired()`
`[attr.aria-busy]`	`ariaBusy()`
`[attr.aria-errormessage]`	`ariaErrorMessage()`
`[attr.aria-readonly]`	`ariaReadonly()`
`[attr.disabled]`	`isDisabled()`
`[attr.autocomplete]`	`resolvedAutocomplete()`
`[attr.spellcheck]`	`resolvedSpellcheck()`
`[class.cngx-input--error]`	`errorState()`
`[class.cngx-input--focused]`	`focused()`

HostListeners#

Event	Handler
`(focus)`	`focus()`
`(blur)`	`blur()`
`(input)`	`input()`

CngxInput

Import#

Description#

Related#

Metadata#

Host#

Providers#

Relationships

Used by2

Depends on1

Index#

Properties

Methods

Inputs

Derived State

HostBindings

HostListeners

Inputs#

Instance Properties#

Methods#

HostBindings#

HostListeners#