DXFormErrorSummary
Lists everything the last failed submit of a useForm returned: a heading,
then one row per validation message with a readable label
(“Price (line 1): Must be positive.”). Place it next to the submit control.
DXForm renders one for you, directly above its
submit button (its errorSummary prop). Use this component on its own when
the submit control is outside the form, such as a modal footer; see
A summary outside the form.
- It reads
form.submitFailure, so it renders nothing before a failure, keeps listing every message while the user edits, and disappears when the next submit starts or one succeeds. - The heading is
title(“Couldn’t save. Please check:”) when the failure has at least one field error. Laravel’s default 422 message is the first error plus “(and 3 more errors)”, which only repeats the first row, so it is not shown then. A failure with no field errors (a message-only 422, a 500, a network failure) is headed by the server’s message, since that is all there is. - Rows follow tab order, then field order. Keys no visible field owns
(unrendered keys, hidden fields) come last as plain text, in a second list
under
otherTitle(“Other problems”). That sub-heading shows only when some rows ARE owned; when none is, they are listed under the heading alone. - Field keys are humanised for unowned rows (and as a label fallback):
delivery_datereads “Delivery date”, a trailing id is dropped (supplier_idreads “Supplier”,lines.0.product_id“Lines product (line 1)”), and a bareidreads “ID”. - A row is left without its “Label: ” prefix when the message already names
the field, and keeps it when the message holds a raw key (
delivery_date) or two rows share a message. - A row naming a visible field is a button that emits
select-target, whatever that field renders: the host decides where focus goes when it finds nothing to focus (DXForm’sfocusErrorTargetmoves it to the field’s tab button). - It is one
DAlert(danger, the subtle tint) withrole="alert", remounted per failure so each new failure is announced once.
<DXFormErrorSummary
:form="form" :fields="fields" :tabs="tabs"
:targets="formRef?.errorTargets ?? null"
@select-target="formRef?.focusErrorTarget($event)"
/>
The resolver behind it is exported too: resolveErrorTargets(errors, { fields, tabs, model, isFieldVisible, isTabVisible, resolveLabel }) returns one
ErrorTarget (errorKey, messages, lines, fieldKey, tabKey, label)
per key, for building your own display.
Props
| Name Click to sort ascending | Type | Required Click to sort ascending | Default | Description |
|---|---|---|---|---|
form | UseFormReturn<any> | DefineFormReturn<any> | Yes | - | The form whose last failed submit to list. |
fields | FieldDefinition[] | No | - | Field definitions (optional with a defineForm return), for labels and ownership (including errorKeys). |
tabs | FormTab[] | No | - | The form's tabs, so rows follow tab order and know their tab. |
context | Record<string, any> | No | - | Merged under the form data when evaluating when and function labels, as on DXForm. |
isFieldVisible | (field) => boolean | No | when/show against the model | Field visibility, replacing the default. |
isTabVisible | (tab) => boolean | No | the tab's when | Tab visibility, replacing the default. |
resolveLabel | (field, labelModel) => string | No | the field's label | A field's label, replacing the default. labelModel is the form model, or the row for a repeater sub-field (as DXRepeater renders it). A label that throws falls back to the humanised key. |
targets | ErrorTarget[] | null | No | - | Rows already resolved by a host form (DXForm's exposed errorTargets). When given, nothing is resolved here; the message still comes from form.submitFailure. |
title | string | No | "Couldn't save. Please check:" | The heading when the failure has field errors. A failure with none is headed by the server's message instead. |
otherTitle | string | No | "Other problems" | The sub-heading over the rows no visible field owns, shown only when some rows are owned. |
Events
| Name Click to sort ascending | Parameters | Description |
|---|---|---|
select-target | { fieldKey, tabKey, errorKey } | A row was clicked. Pass it to DXForm's exposed focusErrorTarget to select the tab and focus the field. |