Skip to main content
cngx-src documentation

CngxFormFieldPresenter

Directivev0.1.0WCAG AA

projects/forms/field/form-field-presenter.ts

Import#

import { CngxFormFieldPresenter } from '@cngx/forms/field'

Description#

Core coordination directive for cngx-form-field.

Reads a Signal Forms Field<T> accessor and derives all ARIA IDs, visibility states, and constraint metadata as pure computed() signals. Applied as a hostDirective on CngxFormField - not used directly in templates.

Metadata#

Host#

Providers#

CNGX_FORM_FIELD_HOST
useExisting CngxFormFieldPresenter

Relationships

Index#

Inputs#

input()Required

The Signal Forms field accessor - a callable that returns FieldState. Accepts Field<T> from @angular/forms/signals directly.

default { alias: 'field' }
input()

Appearance bound on the field, published unresolved as the host contract's skin slot. The presenter deliberately does not fold in the config default: CngxFieldSkinHost owns the single cascade, so a control can tell "the field said nothing" apart from "the field said outline".

Instance Properties#

control#unknown
contentChild()Readonly

The active control discovered through the CNGX_FORM_FIELD_CONTROL content query (descendants: true).

First provider in content order wins. Nested composites legitimately multi-provide the token (a filter-builder wrapping selects); document order guarantees the outer composite resolves before its inner controls, so no duplicate guard exists by design. undefined while no control sits inside the field.

contentChild(CNGX_FORM_FIELD_CONTROL, { descendants: true })

Methods#

markAsTouched#void

Forwards markAsTouched into the bound field's state. Atoms inject CNGX_FORM_FIELD_HOST and call this from their focus-out path without importing the concrete presenter class.

HostBindings#

BindingExpression
[class.cngx-field--error]fieldOrControlError()
[class.cngx-field--touched]touched()
[class.cngx-field--dirty]dirty()
[class.cngx-field--disabled]fieldOrControlDisabled()
[class.cngx-field--required]required()
[class.cngx-field--pending]pending()
[class.cngx-field--readonly]readonly()
[class.cngx-field--hidden]hidden()
[class.cngx-field--valid]valid()
[class.cngx-field--focused]controlFocused()
[class.cngx-field--empty]controlEmpty()