DXFormErrorSummary

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_date reads “Delivery date”, a trailing id is dropped (supplier_id reads “Supplier”, lines.0.product_id “Lines product (line 1)”), and a bare id reads “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’s focusErrorTarget moves it to the field’s tab button).
  • It is one DAlert (danger, the subtle tint) with role="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 ascendingType Required Click to sort ascendingDefault Description
formUseFormReturn<any> | DefineFormReturn<any>Yes-The form whose last failed submit to list.
fieldsFieldDefinition[]No-Field definitions (optional with a defineForm return), for labels and ownership (including errorKeys).
tabsFormTab[]No-The form's tabs, so rows follow tab order and know their tab.
contextRecord<string, any>No-Merged under the form data when evaluating when and function labels, as on DXForm.
isFieldVisible(field) => booleanNowhen/show against the modelField visibility, replacing the default.
isTabVisible(tab) => booleanNothe tab's whenTab visibility, replacing the default.
resolveLabel(field, labelModel) => stringNothe field's labelA 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.
targetsErrorTarget[] | nullNo-Rows already resolved by a host form (DXForm's exposed errorTargets). When given, nothing is resolved here; the message still comes from form.submitFailure.
titlestringNo"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.
otherTitlestringNo"Other problems"The sub-heading over the rows no visible field owns, shown only when some rows are owned.

Events

Name Click to sort ascendingParameters 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.