ad553e967b
### What?
Previously, field error messages displayed in toast notifications used
the field path to reference fields that failed validation. This
path-based approach was necessary to distinguish between fields that
might share the same name when nested inside arrays, groups, rows, or
collapsible fields.
However, the human readability of these paths was lacking, especially
for unnamed fields like rows and collapsible fields. For example:
- A text field inside a row could display as: `_index-0.text`
- A text field nested within multiple arrays could display as:
`items.0.subArray.0.text`
These outputs are technically correct but not user-friendly.
### Why?
While the previous format was helpful for pinpointing the specific field
that caused the validation error, it could be more user-friendly and
clearer to read. The goal is to maintain the same level of accuracy
while improving the readability for both developers and content editors.
### How?
To improve readability, the following changes were made:
1. Use Field Labels Instead of Field Paths:
- The ValidationError component now uses the label prop from the field
config (if available) instead of the field’s name.
- If a label is provided, it will be used in the error message.
- If no label exists, it will fall back to the field’s name.
2. Remove _index from Paths for Unnamed Fields (In the validationError
component only):
- For unnamed fields like rows and collapsibles, the _index prefix is
now stripped from the output to make it cleaner.
- Instead of `_index-0.text`, it now outputs just `Text`.
3. Reformat the Error Path for Readability:
- The error message format has been improved to be more human-readable,
showing the field hierarchy in a structured way with array indices
converted to 1-based numbers.
#### Example transformation:
##### Before:
The following fields are invalid: `items.0.subArray.0.text`
##### After:
The following fields are invalid: `Items 1 > SubArray 1 > Text`
255 lines
5.1 KiB
TypeScript
255 lines
5.1 KiB
TypeScript
import type { CollectionConfig } from 'payload'
|
|
|
|
import { arrayFieldsSlug } from '../../slugs.js'
|
|
|
|
export const arrayDefaultValue = [{ text: 'row one' }, { text: 'row two' }]
|
|
|
|
const ArrayFields: CollectionConfig = {
|
|
admin: {
|
|
enableRichTextLink: false,
|
|
},
|
|
fields: [
|
|
{
|
|
name: 'title',
|
|
type: 'text',
|
|
required: false,
|
|
},
|
|
{
|
|
name: 'items',
|
|
defaultValue: arrayDefaultValue,
|
|
fields: [
|
|
{
|
|
name: 'text',
|
|
type: 'text',
|
|
required: true,
|
|
},
|
|
{
|
|
name: 'anotherText',
|
|
type: 'text',
|
|
},
|
|
{
|
|
name: 'uiField',
|
|
type: 'ui',
|
|
admin: {
|
|
components: {
|
|
Field: {
|
|
path: './collections/Array/LabelComponent.js#ArrayRowLabel',
|
|
serverProps: {
|
|
// While this doesn't do anything, this will reproduce a bug where having server-only props in here will throw a "Functions cannot be passed directly to Client Components" error
|
|
someFn: () => 'Hello',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: 'localizedText',
|
|
type: 'text',
|
|
localized: true,
|
|
},
|
|
{
|
|
name: 'subArray',
|
|
fields: [
|
|
{
|
|
name: 'text',
|
|
type: 'text',
|
|
},
|
|
{
|
|
name: 'textTwo',
|
|
label: 'Second text field',
|
|
type: 'text',
|
|
required: true,
|
|
defaultValue: 'default',
|
|
},
|
|
{
|
|
type: 'row',
|
|
fields: [
|
|
{
|
|
name: 'textInRow',
|
|
type: 'text',
|
|
required: true,
|
|
defaultValue: 'default',
|
|
},
|
|
],
|
|
},
|
|
],
|
|
type: 'array',
|
|
},
|
|
],
|
|
required: true,
|
|
type: 'array',
|
|
},
|
|
{
|
|
name: 'collapsedArray',
|
|
admin: {
|
|
initCollapsed: true,
|
|
},
|
|
fields: [
|
|
{
|
|
name: 'text',
|
|
required: true,
|
|
type: 'text',
|
|
},
|
|
],
|
|
type: 'array',
|
|
},
|
|
{
|
|
name: 'localized',
|
|
defaultValue: arrayDefaultValue,
|
|
fields: [
|
|
{
|
|
name: 'text',
|
|
required: true,
|
|
type: 'text',
|
|
},
|
|
],
|
|
localized: true,
|
|
required: true,
|
|
type: 'array',
|
|
},
|
|
{
|
|
name: 'readOnly',
|
|
admin: {
|
|
readOnly: true,
|
|
},
|
|
defaultValue: [
|
|
{
|
|
text: 'defaultValue',
|
|
},
|
|
{
|
|
text: 'defaultValue2',
|
|
},
|
|
],
|
|
fields: [
|
|
{
|
|
name: 'text',
|
|
type: 'text',
|
|
},
|
|
],
|
|
type: 'array',
|
|
},
|
|
{
|
|
name: 'potentiallyEmptyArray',
|
|
fields: [
|
|
{
|
|
name: 'text',
|
|
type: 'text',
|
|
},
|
|
{
|
|
name: 'groupInRow',
|
|
fields: [
|
|
{
|
|
name: 'textInGroupInRow',
|
|
type: 'text',
|
|
},
|
|
],
|
|
type: 'group',
|
|
},
|
|
],
|
|
type: 'array',
|
|
},
|
|
{
|
|
name: 'rowLabelAsComponent',
|
|
admin: {
|
|
components: {
|
|
RowLabel: '/collections/Array/LabelComponent.js#ArrayRowLabel',
|
|
},
|
|
description: 'Row labels rendered as react components.',
|
|
},
|
|
fields: [
|
|
{
|
|
name: 'title',
|
|
type: 'text',
|
|
},
|
|
],
|
|
type: 'array',
|
|
},
|
|
{
|
|
name: 'arrayWithMinRows',
|
|
fields: [
|
|
{
|
|
name: 'text',
|
|
type: 'text',
|
|
},
|
|
],
|
|
minRows: 2,
|
|
type: 'array',
|
|
},
|
|
{
|
|
name: 'disableSort',
|
|
defaultValue: arrayDefaultValue,
|
|
admin: {
|
|
isSortable: false,
|
|
},
|
|
fields: [
|
|
{
|
|
name: 'text',
|
|
required: true,
|
|
type: 'text',
|
|
},
|
|
],
|
|
type: 'array',
|
|
},
|
|
{
|
|
name: 'nestedArrayLocalized',
|
|
type: 'array',
|
|
fields: [
|
|
{
|
|
type: 'array',
|
|
name: 'array',
|
|
fields: [
|
|
{
|
|
name: 'text',
|
|
type: 'text',
|
|
localized: true,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: 'externallyUpdatedArray',
|
|
type: 'array',
|
|
fields: [
|
|
{
|
|
name: 'customTextField',
|
|
type: 'ui',
|
|
admin: {
|
|
components: {
|
|
Field: '/collections/Array/CustomTextField.js#CustomTextField',
|
|
},
|
|
},
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: 'customArrayField',
|
|
type: 'array',
|
|
admin: {
|
|
components: {
|
|
Field: '/collections/Array/CustomArrayField.js#CustomArrayField',
|
|
},
|
|
},
|
|
fields: [
|
|
{
|
|
name: 'text',
|
|
type: 'text',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: 'ui',
|
|
type: 'ui',
|
|
admin: {
|
|
components: {
|
|
Field: '/collections/Array/AddRowButton.js',
|
|
},
|
|
},
|
|
},
|
|
],
|
|
slug: arrayFieldsSlug,
|
|
versions: true,
|
|
}
|
|
|
|
export default ArrayFields
|