rjsf-errors-on-array-template (#1683)
* display error messages on the ArrayFieldTemplate for item list errors * do not change things that do not need it --------- Co-authored-by: jasquat <jasquat@users.noreply.github.com>
This commit is contained in:
parent
4611628554
commit
9150bb74b0
|
@ -8,6 +8,7 @@ import {
|
||||||
RJSFSchema,
|
RJSFSchema,
|
||||||
StrictRJSFSchema,
|
StrictRJSFSchema,
|
||||||
} from '@rjsf/utils';
|
} from '@rjsf/utils';
|
||||||
|
import { getCommonAttributes } from '../../helpers';
|
||||||
|
|
||||||
/** The `ArrayFieldTemplate` component is the template used to render all items in an array.
|
/** The `ArrayFieldTemplate` component is the template used to render all items in an array.
|
||||||
*
|
*
|
||||||
|
@ -31,6 +32,7 @@ export default function ArrayFieldTemplate<
|
||||||
required,
|
required,
|
||||||
schema,
|
schema,
|
||||||
title,
|
title,
|
||||||
|
rawErrors,
|
||||||
} = props;
|
} = props;
|
||||||
const uiOptions = getUiOptions<T, S, F>(uiSchema);
|
const uiOptions = getUiOptions<T, S, F>(uiSchema);
|
||||||
const ArrayFieldDescriptionTemplate = getTemplate<
|
const ArrayFieldDescriptionTemplate = getTemplate<
|
||||||
|
@ -50,10 +52,14 @@ export default function ArrayFieldTemplate<
|
||||||
S,
|
S,
|
||||||
F
|
F
|
||||||
>('ArrayFieldTitleTemplate', registry, uiOptions);
|
>('ArrayFieldTitleTemplate', registry, uiOptions);
|
||||||
|
|
||||||
|
const commonAttributes = getCommonAttributes('', schema, uiSchema, rawErrors);
|
||||||
|
|
||||||
// Button templates are not overridden in the uiSchema
|
// Button templates are not overridden in the uiSchema
|
||||||
const {
|
const {
|
||||||
ButtonTemplates: { AddButton },
|
ButtonTemplates: { AddButton },
|
||||||
} = registry.templates;
|
} = registry.templates;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<fieldset className={className} id={idSchema.$id}>
|
<fieldset className={className} id={idSchema.$id}>
|
||||||
<ArrayFieldTitleTemplate
|
<ArrayFieldTitleTemplate
|
||||||
|
@ -71,6 +77,14 @@ export default function ArrayFieldTemplate<
|
||||||
uiSchema={uiSchema}
|
uiSchema={uiSchema}
|
||||||
registry={registry}
|
registry={registry}
|
||||||
/>
|
/>
|
||||||
|
{commonAttributes.errorMessageForField && (
|
||||||
|
<>
|
||||||
|
<div className="error-message">
|
||||||
|
{commonAttributes.errorMessageForField}
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
<div className="row array-item-list">
|
<div className="row array-item-list">
|
||||||
{items &&
|
{items &&
|
||||||
items.map(
|
items.map(
|
||||||
|
|
|
@ -37,7 +37,7 @@ export const getCommonAttributes = (
|
||||||
errorMessageForField = (schema as any).validationErrorMessage;
|
errorMessageForField = (schema as any).validationErrorMessage;
|
||||||
errorMessageForFieldWithoutLabel = errorMessageForField;
|
errorMessageForFieldWithoutLabel = errorMessageForField;
|
||||||
} else {
|
} else {
|
||||||
errorMessageForField = `${labelToUse.replace(/\*$/, '')} ${rawErrors[0]}`;
|
errorMessageForField = `"${labelToUse.replace(/\*$/, '')}" ${rawErrors[0]}`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue