Antd form value not received onFinish

Question

I am developing an admin portal using Antd and this is something the I need in the design.

I managed to develop the design using the following code

<Form
labelWrap
wrapperCol={{ span: 24 }}
initialValues={detail && detail.object}
onFinish={handleEdit}>
<Row gutter={100}>
    <Col span={12}>
        <Item
            labelCol={{ span: 7 }}
            label='Status'
            name='status'
            valuePropName='checked'
            required>
            <Space> //-----------#1
                <p className='text-green'>Active</p> //--------#2
                <Switch defaultChecked={detail && detail.object.status} />
                <p className='text-red'>Inactive</p> //------------#3
            </Space> //---------#4
        </Item>
    </Col>
</Row>
</Form>

But when I try to handle the submit function, I am not getting the value of the switch element. I comes as undefined .

const handleEdit = async (values) => {
    console.log(values);
};

But I get the status value correctly when the Switch component is the immediate child of the Item by removing commented lines #1, #2, #3, #4.

I tried using the form.getFieldsValue() method. But that also didn't help.

Is there any way I can get the value in the desired way?

Answer 1

When you pass name prop to Form.Item , the first child of Form.Item is controlled by Form.Item . Since Switch is not the first child of Form.Item , it is not controlled by Form.Item and you didn't get the value status . There are two possible solutions:

Solution 1: Use Form.Item with noStyle prop to design the layout (You can follow this example Complex form control )

Solution 2: Create a custom component that will receives value & onChange prop. Example

import { Col, Form, Row, Space, Switch } from 'antd';

const { Item } = Form;

const CustomSwitch = ({ value, onChange }) => {
    return (
        <Space>
            <p className='text-green'>Active</p>
            <Switch value={value} onChange={onChange} />
            <p className='text-red'>Inactive</p>
        </Space>
    );
};

const App = () => {
    return (
        <Form labelWrap wrapperCol={{ span: 24 }}>
            <Row gutter={100}>
                <Col span={12}>
                    {/* Solution 1 */}
                    <Item labelCol={{ span: 7 }} label='Status'>
                        <Space>
                            <p className='text-green'>Active</p>
                            <Item name='status' noStyle valuePropName='checked' required>
                                <Switch />
                            </Item>
                            <p className='text-red'>Inactive</p>
                        </Space>
                    </Item>

                    {/* Solution 2 */}
                    <Item labelCol={{ span: 7 }} label='Status' name='status' valuePropName='checked' required>
                        <CustomSwitch />
                    </Item>
                </Col>
            </Row>
        </Form>
    );
};

export default App;