Fix ArrayInput validation

cypress/integration/create.js

@@ -38,6 +38,15 @@ describe('Create Page', () => {
         );
     });
 
+    it('should validate ArrayInput', () => {
+        const backlinksContainer = cy
+            .get(CreatePage.elements.input('backlinks[0].date'))
+            .parents('.ra-input-backlinks');
+        backlinksContainer.contains('Remove').click();
+        CreatePage.submit();
+        backlinksContainer.contains('Required');
+    });
+
     it('should have a working array input with references', () => {
         CreatePage.logout();
         LoginPage.login('admin', 'password');

examples/simple/src/posts/PostCreate.js

@@ -148,6 +148,7 @@ const PostCreate = ({ permissions, ...props }) => {
                 <ArrayInput
                     source="backlinks"
                     defaultValue={backlinksDefaultValue}
+                    validate={[required()]}
                 >
                     <SimpleFormIterator>
                         <DateInput source="date" />

packages/ra-ui-materialui/src/form/SimpleFormIterator.js

@@ -14,7 +14,7 @@ import FormHelperText from '@material-ui/core/FormHelperText';
 import { withStyles, createStyles } from '@material-ui/core/styles';
 import CloseIcon from '@material-ui/icons/RemoveCircleOutline';
 import AddIcon from '@material-ui/icons/AddCircleOutline';
-import { translate } from 'ra-core';
+import { translate, ValidationError } from 'ra-core';
 import classNames from 'classnames';
 
 import FormInput from '../form/FormInput';
@@ -128,7 +128,9 @@ export class SimpleFormIterator extends Component {
         return fields ? (
             <ul className={classes.root}>
                 {submitFailed && typeof error !== 'object' && error && (
-                    <FormHelperText error>{error}</FormHelperText>
+                    <FormHelperText error>
+                        <ValidationError error={error} />
+                    </FormHelperText>
                 )}
                 <TransitionGroup component={null}>
                     {fields.map((member, index) => (

packages/ra-ui-materialui/src/input/ArrayInput.tsx

@@ -1,6 +1,6 @@
 import React, { cloneElement, Children } from 'react';
 import PropTypes from 'prop-types';
-import { isRequired, FieldTitle } from 'ra-core';
+import { isRequired, FieldTitle, composeValidators } from 'ra-core';
 import { useFieldArray } from 'react-final-form-arrays';
 import { InputLabel, FormControl } from '@material-ui/core';
 
@@ -60,9 +60,13 @@ export const ArrayInput = ({
     margin = 'dense',
     ...rest
 }) => {
+    const sanitizedValidate = Array.isArray(validate)
+        ? composeValidators(validate)
+        : validate;
+
     const fieldProps = useFieldArray(source, {
         initialValue: defaultValue,
-        validate,
+        validate: sanitizedValidate,
         ...rest,
     });