How to custom value of Form Field in AntD? - reactjs

Question

I am handling Form.Item with Ant Design, everything works fine, however I want to custom the value of Form.Item like below code example:
const onFinish = (values) => {
console.log('Values received:', values);
/*
Normally we would get the result like:
{
email: 'abc#gmail.com'
}
===================================================
But as expected, when user input an email
i want to get the result directly with object format like this:
{
email: { email: 'abc#gmail.com', rule: 'user' }
}
*/
};
return (
<Form
name="user_information"
onFinish={onFinish}
>
<Form.Item
label="Email"
name="email"
rules={[
{
required: true,
message: 'Your email cannot be empty!',
},
]}
>
<Input placeholder="Enter your email" />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
Update now
</Button>
</Form.Item>
</Form>
);
I tried providing value prop to <Input /> component but it not works.
So what does I need to provide to Form.Itemor Input to solve the above problem?
Thanks!

Answer 1

Antd Form gives us the values when submitting the form of all the form control inputs in the form of the object where the key would be the name of the form control inputs and value would be the value given by the user.
The best practice which I know about is that we should never change the input values before submitting the form manually otherwise our form may show unexpected behavior which we can't figure out.
However, if you want to do a post request with a payload of data that is slightly different than the form values, then you can modify the form data before submitting the request.
const [formValues, setFormValues] = useState()
const onFinish = (values) => {
console.log("Values received:", values);
// modify the form value here
// remember don't change `values`, preserve the form value in some other variable or state.
const keys = Object.keys(changedValues);
let newValues = { [keys[0]]: { [keys[0]]: changedValues[keys[0]]} }
console.log(newValues);
};
return (
<Form name="user_information" onFinish={onFinish}>
<Form.Item
label="Email"
name="email"
rules={[
{
required: true,
message: "Your email cannot be empty!",
},
]}
>
<Input placeholder="Enter your email" />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
Update now
</Button>
</Form.Item>
</Form>
);