Skip to main content
cngx-src documentation

CngxError

DirectivePrimaryv0.1.0WCAG AA

projects/forms/field/error.directive.ts

Import#

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

Description#

Marks a manual error container inside a cngx-form-field.

Use this when you want full control over error rendering. For automatic error rendering from a message registry, use CngxFieldErrors instead.

The container is always in the DOM. aria-hidden toggles based on the showError gate (touched AND invalid). role="alert" ensures screen readers announce errors.

<div cngxError>
  @if (presenter.errors(); as errors) {
    @for (e of errors; track e.kind) {
      <span>{{ e.message }}</span>
    }
  }
</div>

https://cngxjs.github.io/cngx/examples/#/forms/field/error/basic https://cngxjs.github.io/cngx/examples/#/forms/field/error/icons-per-kind https://cngxjs.github.io/cngx/examples/#/forms/field/error/server-injected-error https://cngxjs.github.io/cngx/examples/#/forms/field/error/when-to-pick-manual-vs-auto

Metadata#

Host#

Index#

HostBindings#

BindingExpression
[id]presenter.errorId()
[attr.aria-hidden]ariaHidden()
[attr.role]role()
[attr.aria-live]"polite"