diff --git a/src/admin/components/forms/field-types/Array/Array.js b/src/admin/components/forms/field-types/Array/Array.js index faca971684..497da924c2 100644 --- a/src/admin/components/forms/field-types/Array/Array.js +++ b/src/admin/components/forms/field-types/Array/Array.js @@ -120,6 +120,7 @@ const ArrayFieldType = (props) => { readOnly={readOnly} minRows={minRows} maxRows={maxRows} + required={required} /> ); }; @@ -183,6 +184,7 @@ const RenderArray = React.memo((props) => { width, minRows, maxRows, + required, } = props; return ( @@ -227,14 +229,13 @@ const RenderArray = React.memo((props) => { permissions={permissions.fields} /> ))} - {rows.length < minRows && ( + {(rows.length < minRows || (required && rows.length === 0)) && ( This field requires at least {' '} - {minRows} - {' '} - {labels.plural} - . + {minRows + ? `${minRows} ${labels.plural}` + : `1 ${labels.singular}`} )} {(rows.length === 0 && readOnly) && ( @@ -283,6 +284,7 @@ RenderArray.defaultProps = { width: undefined, maxRows: undefined, minRows: undefined, + required: false, }; RenderArray.propTypes = { @@ -315,6 +317,7 @@ RenderArray.propTypes = { width: PropTypes.string, maxRows: PropTypes.number, minRows: PropTypes.number, + required: PropTypes.bool, }; export default withCondition(ArrayFieldType); diff --git a/src/admin/components/forms/field-types/Blocks/Blocks.js b/src/admin/components/forms/field-types/Blocks/Blocks.js index a6ba4d4c07..4aaddc719f 100644 --- a/src/admin/components/forms/field-types/Blocks/Blocks.js +++ b/src/admin/components/forms/field-types/Blocks/Blocks.js @@ -141,6 +141,7 @@ const Blocks = (props) => { style={style} width={width} minRows={minRows} + required={required} /> ); }; @@ -207,6 +208,7 @@ const RenderBlocks = React.memo((props) => { width, minRows, maxRows, + required, } = props; return ( @@ -275,13 +277,13 @@ const RenderBlocks = React.memo((props) => { return null; })} - {rows.length < minRows && ( + {(rows.length < minRows || (required && rows.length === 0)) && ( This field requires at least {' '} - {minRows} - {' '} - {labels.plural} + {minRows + ? `${minRows} ${labels.plural}` + : `1 ${labels.singular}`} )} {(rows.length === 0 && readOnly) && ( @@ -345,6 +347,7 @@ RenderBlocks.defaultProps = { width: undefined, maxRows: undefined, minRows: undefined, + required: false, }; RenderBlocks.propTypes = { @@ -378,6 +381,7 @@ RenderBlocks.propTypes = { width: PropTypes.string, maxRows: PropTypes.number, minRows: PropTypes.number, + required: PropTypes.bool, }; export default withCondition(Blocks);