CngxErrorScope

DirectivePrimaryv0.1.0WCAG AA

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

Import#

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

Description#

Marks a DOM subtree as an error visibility scope.

The scope starts hidden - descendant aggregators and error states do not reveal until the consumer calls reveal, typically via a (submit) handler, a route guard, or an HTTP interceptor reveal-on-422 pattern.

Provides CNGX_ERROR_SCOPE so any descendant (CngxErrorAggregator, CngxErrorState, the form-field presenter in Phase 6b) can read showErrors reactively without injecting a concrete class.

<form [cngxErrorScope] cngxErrorScopeName="checkout"
      (submit)="scope.reveal(); save()" #scope="cngxErrorScope">
  <input [cngxErrorState]="email().invalid()" />
</form>

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

Metadata#

Selector: [cngxErrorScope]
Export as: cngxErrorScope
Implements: CngxErrorScopeContract

Providers#

CNGX_ERROR_SCOPE: useExisting CngxErrorScope

Relationships

Depends on1

CNGX_ERROR_SCOPEservice

Index#

Inputs#

scopeName#string | undefined

input()

Optional name; enables programmatic lookup via CngxErrorRegistry.

default undefined, { alias: 'cngxErrorScopeName', }

Instance Properties#

showErrors#unknown

Readonly

Reactive flag consumed by descendants.

this.showErrorsState.asReadonly()

Methods#

reset#void

Resets the scope to hidden (idempotent).

reveal#void

Reveals errors in this scope (idempotent).