Ant d switch doesnot work in form item
import React from 'react';
import { Form, Switch } from 'antd';
interface SwitchInputProps {
label: string;
name: string;
size?: 'default' | 'small'; // Make size prop accept only specific values
}
const SwitchInput = ({ label, name, size }: SwitchInputProps) => {
return (
<Form.Item
name={name}
valuePropName=""
>
<div style={{ display: 'flex' }}>
<h4 style={{ marginRight: "10px" }}>{label}</h4>
<Switch size={size} />
</div>
</Form.Item>
);
};
export default SwitchInput;
when used this it is returning the value as undefined
22 Replies
Hi @jash.s. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The issue you're facing is likely due to the
valuePropName
prop in your Form.Item
being set to an empty string. This prop is used to define which property of the form-controlled component (in this case, the Switch
) should be used as the value for form data. For a Switch
component, this should be "checked"
.
Here's how you should modify your code:
This way, the value of the Switch
(whether it's on or off) will be correctly captured in the form data.
For more information on how to use forms in refine, you can refer to the useForm documentation (https://refine.dev/docs/api-reference/core/hooks/useForm/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1129363768661516329> kapa.ai is still learning and improving, please let us know how it did by reacting below
foreign-sapphire•12mo ago
@kapa.ai wat did u modify ?
Let me check the knowledge base for you. One moment! :books:
----------------------
I modified the
valuePropName
prop in your Form.Item
component. Initially, it was set to an empty string (""
), which means it wasn't correctly mapping to any property of the Switch
component.
I changed it to "checked"
, like so:
The valuePropName
prop is used to specify which property of the form-controlled component (in this case, the Switch
) should be used as the value for form data. For a Switch
component, this should be "checked"
, as this property indicates whether the switch is on (true
) or off (false
).
By setting valuePropName
to "checked"
, the form data will correctly reflect the state of the Switch
component.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1129363768661516329> kapa.ai is still learning and improving, please let us know how it did by reacting below
foreign-sapphire•12mo ago
any thought on this?
const onFinishHandler = async (data: any) => {
console.log(data)
await onFinish({
...data,
createdBy: identity.username
})
}when consoled i m getting the value of all the switch wheter seleted or not undefined
rising-crimson•12mo ago
hello @jash.s
Form.Item's first child should be input
like this
<Form.Item
<Switch>
foreign-sapphire•12mo ago
<Form.Item
name={[name]}
valuePropName="checked"
>
<Switch size={size} />
</Form.Item> by this if it is false it is returing undefined
and wat needs to be done if i need to style it @alicanerdurmaz
rising-crimson•12mo ago
you can give className to switch components or you can use design tokens
https://ant.design/components/switch
name field is string. I guess it's wrong. switch should be boolean
Switch - Ant Design
An enterprise-class UI design language and React UI library with a set of high-quality React components, one of best React UI library for enterprises
foreign-sapphire•12mo ago
wat about the undefined one ?
@alicanerdurmaz
rising-crimson•12mo ago
I don't understand undefined one case. switch has 2 case. true or false
foreign-sapphire•12mo ago
for the above if i click on the save button without toggling the switch the it consoles undefined as the value @alicanerdurmaz
![No description](https://cdn.answeroverflow.com/1161238547106381834/Screenshot_from_2023-10-10_15-15-48.png)
rising-crimson•12mo ago
hmm. can you double check please, form item name prop is correct ?
<Form.Item
name={[name]}
valuePropName="checked"
>
<Switch size={size} />
</Form.Item> by this if it is false it is returing undefined
foreign-sapphire•12mo ago
yes
so it is like if the user comes on the page and doesnot change or toogle the switch the value is undefined but if the user toogles it then it will return true or false on the toogled
rising-crimson•12mo ago
I don't think it's possible. antd switch only can be true or false.
you can use another state and keep track of "users is changed to toggle" if it's not you can modify form values and send undefined