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);