'How to custom value of Form Field in AntD?

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: '[email protected]'
      } 

      ===================================================

      But as expected, when user input an email 
      i want to get the result directly with object format like this:
      {
        email: { email: '[email protected]', 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!



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source