fix(ant): pass name to Form.Item

Author: rvsia

packages/ant-component-mapper/src/date-picker/date-picker.js

@@ -19,6 +19,7 @@ const DatePicker = (props) => {
       description={description}
       FormItemProps={FormItemProps}
       isRequired={isRequired}
+      input={input}
     >
       <AntDatePicker
         disabled={isDisabled || isReadOnly}

packages/ant-component-mapper/src/dual-list-select/dual-list-select.js

@@ -29,6 +29,7 @@ const DualListSelect = (props) => {
       description={description}
       FormItemProps={FormItemProps}
       isRequired={isRequired}
+      input={input}
     >
       <Transfer
         {...input}

packages/ant-component-mapper/src/form-group/form-group.js

@@ -5,7 +5,7 @@ import { Form } from 'antd';
 import { validationError } from '../validation-error/';
 import { childrenPropTypes } from '@data-driven-forms/common/prop-types-templates';
 
-const FormGroup = ({ label, children, isRequired, FormItemProps, meta, validateOnMount, helperText, description, hideLabel }) => {
+const FormGroup = ({ label, children, isRequired, FormItemProps, meta, validateOnMount, helperText, description, hideLabel, input }) => {
   const invalid = validationError(meta, validateOnMount);
   const warning = (meta.touched || validateOnMount) && meta.warning;
   const help = invalid || warning || helperText || description;
@@ -16,6 +16,7 @@ const FormGroup = ({ label, children, isRequired, FormItemProps, meta, validateO
       help={help}
       label={!hideLabel && label}
       required={isRequired}
+      name={input?.name}
       {...FormItemProps}
     >
       {children}
@@ -35,6 +36,7 @@ FormGroup.propTypes = {
   helperText: PropTypes.node,
   description: PropTypes.node,
   hideLabel: PropTypes.bool,
+  input: PropTypes.object,
 };
 
 export default FormGroup;

packages/ant-component-mapper/src/multiple-choice-list/multiple-choice-list.js

@@ -16,7 +16,7 @@ FinalCheckbox.propTypes = {
   label: PropTypes.node,
 };
 
-const Wrapper = ({ label, isRequired, children, meta, validateOnMount, helperText, description, FormItemProps }) => (
+const Wrapper = ({ label, isRequired, children, meta, input, validateOnMount, helperText, description, FormItemProps }) => (
   <FormGroup
     label={label}
     meta={meta}
@@ -25,6 +25,7 @@ const Wrapper = ({ label, isRequired, children, meta, validateOnMount, helperTex
     description={description}
     FormItemProps={FormItemProps}
     isRequired={isRequired}
+    input={input}
   >
     {children}
   </FormGroup>

packages/ant-component-mapper/src/select/select.js

@@ -38,6 +38,7 @@ const Select = (props) => {
       description={description}
       FormItemProps={FormItemProps}
       isRequired={isRequired}
+      input={input}
     >
       <AntSelect
         {...input}

packages/ant-component-mapper/src/switch/switch.js

@@ -34,6 +34,7 @@ export const Switch = (props) => {
       description={description}
       FormItemProps={FormItemProps}
       isRequired={isRequired}
+      input={input}
     >
       <AntSwitch
         {...rest}

packages/ant-component-mapper/src/tests/components.test.js

@@ -75,6 +75,10 @@ describe('formFields generated tests', () => {
           }
 
           expect(screen.getByText(field.label)).toBeInTheDocument();
+
+          if (![componentTypes.RADIO, componentTypes.SLIDER].includes(component)) {
+            expect(screen.getByLabelText(field.label)).toBeInTheDocument();
+          }
         });
 
         it('renders with error', async () => {

packages/ant-component-mapper/src/text-field/text-field.js

@@ -18,6 +18,7 @@ const TextField = (props) => {
       description={description}
       FormItemProps={FormItemProps}
       isRequired={isRequired}
+      input={input}
     >
       <Input
         {...input}

packages/ant-component-mapper/src/textarea/textarea.js

@@ -20,6 +20,7 @@ const Textarea = (props) => {
       description={description}
       FormItemProps={FormItemProps}
       isRequired={isRequired}
+      input={input}
     >
       <TextArea
         {...input}

packages/ant-component-mapper/src/time-picker/time-picker.js

@@ -19,6 +19,7 @@ const TimePicker = (props) => {
       description={description}
       FormItemProps={FormItemProps}
       isRequired={isRequired}
+      input={input}
     >
       <AntTimePicker
         use12Hours={true}