Fix required for field wrappers.

Author: robgietema

frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/CheckboxGroupWrapper.jsx

@@ -24,6 +24,7 @@ const CheckboxGroupWrapper = (props) => {
     title,
     description,
     required,
+    error,
     intl,
   } = props;
 
@@ -101,6 +102,8 @@ const CheckboxGroupWrapper = (props) => {
             value: option[0],
             label: option[1],
           }))}
+          errorMessage={error ? error[0] : ''}
+          isInvalid={error}
         />
       )}
     </FormFieldWrapper>

frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/CheckboxWrapper.jsx

@@ -22,6 +22,7 @@ const CheckboxWrapper = (props) => {
     title,
     description,
     required,
+    error,
     intl,
   } = props;
 
@@ -42,6 +43,8 @@ const CheckboxWrapper = (props) => {
         onChange={(value) => onChange(id, value === '' ? undefined : value)}
         ref={ref}
         onClick={() => onClick()}
+        errorMessage={error ? error[0] : ''}
+        isInvalid={error}
       />
     </FormFieldWrapper>
   );

frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/DatetimeWrapper.jsx

@@ -30,6 +30,7 @@ const DatetimeWrapper = (props) => {
     description,
     widget,
     required,
+    error,
     intl,
   } = props;
 
@@ -81,6 +82,8 @@ const DatetimeWrapper = (props) => {
         onChangeTime={onDateChange}
         ref={ref}
         onClick={() => onClick()}
+        errorMessage={error ? error[0] : ''}
+        isInvalid={error}
       />
     </FormFieldWrapper>
   );

frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/EmailWrapper.jsx

@@ -24,6 +24,7 @@ const EmailWrapper = (props) => {
     title,
     description,
     required,
+    error,
     intl,
   } = props;
 
@@ -47,6 +48,8 @@ const EmailWrapper = (props) => {
         onClick={() => onClick()}
         minLength={minLength || null}
         maxLength={maxLength || null}
+        errorMessage={error ? error[0] : ''}
+        isInvalid={error}
       />
     </FormFieldWrapper>
   );

frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/FileWrapper.jsx

@@ -32,6 +32,7 @@ const FileWrapper = (props) => {
     accept,
     size,
     required,
+    error,
     intl,
   } = props;
 
@@ -69,6 +70,8 @@ const FileWrapper = (props) => {
           onChange(id, null);
         }}
         ref={ref}
+        errorMessage={error ? error[0] : ''}
+        isInvalid={error}
       />
     </FormFieldWrapper>
   );

frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/HiddenWrapper.jsx

@@ -24,6 +24,7 @@ const HiddenWrapper = (props) => {
     description,
     onEdit,
     required,
+    error,
     intl,
   } = props;
 
@@ -45,6 +46,8 @@ const HiddenWrapper = (props) => {
         onChange={(value) => onChange(id, value === '' ? undefined : value)}
         ref={ref}
         onClick={() => onClick()}
+        errorMessage={error ? error[0] : ''}
+        isInvalid={error}
       />
     </FormFieldWrapper>
   ) : (

frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/NumberWrapper.jsx

@@ -23,6 +23,7 @@ const NumberWrapper = (props) => {
     title,
     description,
     required,
+    error,
     intl,
   } = props;
 
@@ -44,6 +45,8 @@ const NumberWrapper = (props) => {
         placeholder={placeholder}
         onChange={(value) => onChange(id, value === '' ? undefined : value)}
         ref={ref}
+        errorMessage={error ? error[0] : ''}
+        isInvalid={error}
         onClick={() => onClick()}
       />
     </FormFieldWrapper>

frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/RadioGroupWrapper.jsx

@@ -23,6 +23,7 @@ const RadioGroupWrapper = (props) => {
     title,
     description,
     required,
+    error,
     intl,
   } = props;
 
@@ -47,6 +48,8 @@ const RadioGroupWrapper = (props) => {
         onChange={(value) => onChange(id, value === '' ? undefined : value)}
         ref={ref}
         onClick={() => onClick()}
+        errorMessage={error ? error[0] : ''}
+        isInvalid={error}
       >
         {options.map((option) => (
           <OptionWidget value={option[0]}>{option[1]}</OptionWidget>

frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/SelectWrapper.jsx

@@ -27,6 +27,7 @@ const SelectWrapper = (props) => {
     title,
     description,
     required,
+    error,
     intl,
   } = props;
 
@@ -53,6 +54,8 @@ const SelectWrapper = (props) => {
         placeholder={intl.formatMessage(messages.select)}
         onChange={(value) => onChange(id, value.value)}
         ref={ref}
+        errorMessage={error ? error[0] : ''}
+        isInvalid={error}
         onClick={() => onClick()}
         options={options.map((option) => ({
           value: option[0],

frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/TextWrapper.jsx

@@ -25,6 +25,7 @@ const TextWrapper = (props) => {
     title,
     description,
     required,
+    error,
     intl,
   } = props;
 
@@ -48,6 +49,8 @@ const TextWrapper = (props) => {
         onClick={() => onClick()}
         minLength={minLength || null}
         maxLength={maxLength || null}
+        errorMessage={error ? error[0] : ''}
+        isInvalid={error}
       />
     </FormFieldWrapper>
   );