Skip to main content
cngx-src documentation

CngxErrorSource

DirectivePrimaryv0.1.0WCAG AA

projects/common/interactive/error-source/error-source.directive.ts

Import#

import { CngxErrorSource } from '@cngx/common/interactive'

Description#

Registers a single error condition with the nearest CngxErrorAggregator ancestor.

Pure DI propagation - no DOM output. The directive is a no-op when no aggregator is present (the optional injection returns null). Useful for surfacing errors that live outside the form-field presenter, e.g. server-side validation, async availability checks, or business-rule conflicts.

The when input takes a plain boolean. Consumers binding a signal write [when]="form.email().invalid()" - the signal is invoked at the binding site (canonical Angular pattern), mirroring CngxErrorState discipline.

<fieldset cngxErrorAggregator>
  <span cngxErrorSource="email-format" [when]="email().invalid()"
        label="Email format invalid"></span>
  <span cngxErrorSource="email-taken" [when]="serverErr() === 'taken'"
        label="Email already in use"></span>
</fieldset>

https://cngxjs.github.io/cngx/examples/#/common/interactive/error/aggregator/cngx-card-host-no-scope-errors-visible-immediately https://cngxjs.github.io/cngx/examples/#/common/interactive/error/aggregator/cngx-popover-panel-host https://cngxjs.github.io/cngx/examples/#/common/interactive/error/aggregator/material-mat-tab-label-with-error-count-badge https://cngxjs.github.io/cngx/examples/#/common/interactive/error/aggregator/native-form-scope-reveal-on-submit https://cngxjs.github.io/cngx/examples/#/ui/tabs/tab-error-aggregation/per-tab-error-badges

Metadata#

Index#

Inputs#

cngxErrorSource#string
input()Required

Unique key within the parent aggregator. Required.

label#string | null
input()

Optional human-readable label included in aggregator announcements.

default null
input()Required

Live error condition. Required (consumer invokes signals at the binding site).