CngxFormErrors
projects/forms/field/form-errors.component.ts
Import#
import { CngxFormErrors } from '@cngx/forms/field'
Description#
Form-level error summary - lists all validation errors across all fields.
Place outside (or at the top/bottom of) the form. Each error is a focusable link
that jumps to the invalid field via focusBoundControl().
Only visible when showErrors() is true (controlled by the consumer, typically
set after a failed submit).
This implements the WCAG 3.3.1 pattern: "If an input error is detected, the item that is in error is identified and the error is described to the user in text."
<cngx-form-errors [fields]="[emailField, passwordField]" [show]="showFormErrors()">
</cngx-form-errors>Custom template
<cngx-form-errors [fields]="[emailField, passwordField]" [show]="submitted()">
<ng-template let-errors="errors" let-count="count">
<h3>{{ count }} errors found</h3>
@for (err of errors; track err.fieldName) {
<a (click)="err.focus()" href="javascript:void(0)">
{{ err.fieldName }}: {{ err.message }}
</a>
}
</ng-template>
</cngx-form-errors>Metadata#
Host#
Relationships
Depends on1
Index#
Inputs#
Instance Properties#
unknownOptional custom template.
contentChild<TemplateRef<CngxFormErrorsSummaryContext>>(TemplateRef)HostBindings#
| Binding | Expression |
|---|---|
[attr.role] | show() && errorItems().length > 0 ? "alert" : null |
[attr.aria-live] | "polite" |
Default visuals for CngxFieldErrors - bulleted error list rendered
under a form field. The host carries .cngx-form-errors and stays
display: contents; the inner .cngx-form-errors__list holds the
list typography and color.
Slots
.cngx-form-errors__list- the<ul>element, font-size + danger color.cngx-form-errors__list a- inline anchors inherit color and carry an underline that drops on:hover/:focus-visibleso the interaction state reads independently of the resting decoration
Inheritance
Tokens delegate to the foundation so a brand override propagates without per-component theming:
--cngx-form-errors-font-size->--cngx-font-size-sm--cngx-form-errors-color->--cngx-field-error-color->--cngx-color-danger
A :root delegating rule pins --cngx-form-errors-color to
--cngx-color-danger so a dark-mode swap on the foundation token
cascades through.
Index#
Typography
Surface
Typography
*0.875remFont-size of the error list. Falls back through
--cngx-font-size-sm. syntax: '*' allows rem.
Surface
<color>oklch(0.55 0.21 27)Text color of the error list. Falls back through
--cngx-field-error-color and then --cngx-color-danger.
See: [[--cngx-color-danger]]