Ant Design ColorPicker component, transform the value before sending it to the server?

Question

I'm using Refine with Ant Design. I've a form for creating a new tag. The form has a property named background_color, which should be the color in HEX format (i.e. #ff6347).

The problem is that <ColorPicker> component seems to output an object:

{"metaColor":{"originalInput":{"h":215.15151515151516,"s":0.8034188034188035,"a":1,"v":0.50625},"r":25.377324599999998,"g":68.32531138181821,"b":129.081,"a":1,"roundA":1,"format":"hsv","isValid":true}}   {"metaColor":{"originalInput":{"h":309.34600515463916,"s":0.8021501068376068,"a":1,"v":0.58125},"r":148.206,"g":29.329967400000008,"b":129.68906644262245,"a":1,"roundA":1,"format":"hsv","isValid":true}}  

Object has a toHexString() method which I'm using inside getValueProps. But it's not working, the value sent to the server is still the object above.

How can I transform the value before sending it to the server? And how to trasform the value back (in my edit form) to be correctly recognized by the <ColorPicker>?

import { Create, useForm } from "@refinedev/antd";
import { IResourceComponentsProps } from "@refinedev/core";
import { Form, Input, ColorPicker, Row, Col } from "antd";
import React from "react";

export const TagCreate: React.FC<IResourceComponentsProps> = () => {
  const { formProps, saveButtonProps } = useForm();

  return (
    <Create saveButtonProps={saveButtonProps}>
      <Form {...formProps} layout="vertical">
        <Form.Item label="name" name={["name"]}>
          <Input />
        </Form.Item>
        <Form.Item
          label="Background color"
          name={["background_color"]}
          getValueProps={(value) => ({
              value: value ? value.toHexString() : undefined,
          })}
        >
            <ColorPicker />
        </Form.Item>
      </Form>
    </Create>
  );
};

Answer 1

The solution is to use getValueFromEvent in Form.Item.

Here is the solution you can use. I used toHex() function of Color provided in the ColorPicker

import { IResourceComponentsProps } from "@refinedev/core";
import { Form, Input, ColorPicker, Row, Col } from "antd";
import React from "react";

export const TagCreate: React.FC<IResourceComponentsProps> = () => {
  const { formProps, saveButtonProps } = useForm();

  return (
    <Create saveButtonProps={saveButtonProps}>
      <Form {...formProps} layout="vertical">
        <Form.Item label="name" name={["name"]}>
          <Input />
        </Form.Item>
        <Form.Item
          label="Background color"
          name={["background_color"]}
          getValueFromEvent={(color) => {
              return "#" + color.toHex();
            }}
        >
            <ColorPicker />
        </Form.Item>
      </Form>
    </Create>
  );
};

Answer 2

I encountered a similar issue while using ColorPicker with ProForm, as I received an object instead of a hex color in the submit method. We can use the onChange method of ColorPicker to get the hex value and set the form field value.

<ColorPicker
  value={bgColor || '#1677FF'}
  onChange={(_, hex) => {
    form.setFieldsValue({ bgColor: hex });
  }}
/>