Transform Antd useForm Values on Submission

How can I transform the user's entered values before they are submitted with useForm from refinedev/antd?

5 Replies

Hi @obelisk291. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To transform the user's entered values before they are submitted using useForm from @refinedev/antd, you can utilize the onFinish function. Here's how you can do it: 1. First, import the necessary components and hooks:

import { useForm, Create } from "@refinedev/antd";
import { Form, Input } from "antd";

import { useForm, Create } from "@refinedev/antd";
import { Form, Input } from "antd";

2. In your component, use the useForm hook:

const { formProps, saveButtonProps, onFinish } = useForm();

const { formProps, saveButtonProps, onFinish } = useForm();

3. Create a custom handleOnFinish function to transform the values:

const handleOnFinish = (values) => {
  onFinish({
    fullName: `${values.name} ${values.surname}`,
  });
};

const handleOnFinish = (values) => {
  onFinish({
    fullName: `${values.name} ${values.surname}`,
  });
};

4. Use this custom function in your form's onFinish prop:

<Form {...formProps} onFinish={handleOnFinish} layout="vertical">
  <Form.Item label="Name" name="name">
    <Input />
  </Form.Item>
  <Form.Item label="Surname" name="surname">
    <Input />
  </Form.Item>
</Form>

<Form {...formProps} onFinish={handleOnFinish} layout="vertical">
  <Form.Item label="Name" name="name">
    <Input />
  </Form.Item>
  <Form.Item label="Surname" name="surname">
    <Input />
  </Form.Item>
</Form>

Here's a complete example:

import { useForm, Create } from "@refinedev/antd";
import { Form, Input } from "antd";
import React from "react";

export const UserCreate: React.FC = () => {
  const { formProps, saveButtonProps, onFinish } = useForm();

  const handleOnFinish = (values) => {
    onFinish({
      fullName: `${values.name} ${values.surname}`,
    });
  };

  return (
    <Create saveButtonProps={saveButtonProps}>
      <Form {...formProps} onFinish={handleOnFinish} layout="vertical">
        <Form.Item label="Name" name="name">
          <Input />
        </Form.Item>
        <Form.Item label="Surname" name="surname">
          <Input />
        </Form.Item>
      </Form>
    </Create>
  );
};

import { useForm, Create } from "@refinedev/antd";
import { Form, Input } from "antd";
import React from "react";

export const UserCreate: React.FC = () => {
  const { formProps, saveButtonProps, onFinish } = useForm();

  const handleOnFinish = (values) => {
    onFinish({
      fullName: `${values.name} ${values.surname}`,
    });
  };

  return (
    <Create saveButtonProps={saveButtonProps}>
      <Form {...formProps} onFinish={handleOnFinish} layout="vertical">
        <Form.Item label="Name" name="name">
          <Input />
        </Form.Item>
        <Form.Item label="Surname" name="surname">
          <Input />
        </Form.Item>
      </Form>
    </Create>
  );
};

In this example, the name and surname fields are combined into a fullName field before submission. You can find more information about this in the Refine Ant Design useForm documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@1257731147509661728> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

harsh-harlequinOP•2w ago

@kapa.ai Cannot find name 'onFinish'.ts(2304)

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I apologize for the confusion in my previous answer. It seems I made an error in explaining the usage of onFinish. Let me provide a correct and more detailed explanation based on the official Refine documentation. The error "Cannot find name 'onFinish'.ts(2304)" occurs because onFinish is not directly available from the useForm hook in @refinedev/antd. Instead, it's part of the formProps object. Here's how you can correctly transform the form values before submission: 1. First, import the necessary components and hooks:

import { useForm, Create } from "@refinedev/antd";
import { Form, Input } from "antd";

import { useForm, Create } from "@refinedev/antd";
import { Form, Input } from "antd";

2. In your component, use the useForm hook:

const { formProps, saveButtonProps } = useForm();

const { formProps, saveButtonProps } = useForm();

3. Create a custom handleOnFinish function to transform the values:

const handleOnFinish = (values) => {
  return {
    fullName: `${values.name} ${values.surname}`,
  };
};

const handleOnFinish = (values) => {
  return {
    fullName: `${values.name} ${values.surname}`,
  };
};

4. Use this custom function in your form's onFinish prop, combining it with the original formProps.onFinish:

<Form 
  {...formProps} 
  onFinish={(values) => formProps.onFinish?.(handleOnFinish(values))}
  layout="vertical"
>
  <Form.Item label="Name" name="name">
    <Input />
  </Form.Item>
  <Form.Item label="Surname" name="surname">
    <Input />
  </Form.Item>
</Form>

<Form 
  {...formProps} 
  onFinish={(values) => formProps.onFinish?.(handleOnFinish(values))}
  layout="vertical"
>
  <Form.Item label="Name" name="name">
    <Input />
  </Form.Item>
  <Form.Item label="Surname" name="surname">
    <Input />
  </Form.Item>
</Form>

Here's the complete, corrected example:

import { useForm, Create } from "@refinedev/antd";
import { Form, Input } from "antd";
import React from "react";

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

  const handleOnFinish = (values) => {
    return {
      fullName: `${values.name} ${values.surname}`,
    };
  };
return (
    <Create saveButtonProps={saveButtonProps}>
      <Form 
        {...formProps} 
        onFinish={(values) => formProps.onFinish?.(handleOnFinish(values))}
        layout="vertical"
      >
        <Form.Item label="Name" name="name">
          <Input />
        </Form.Item>
        <Form.Item label="Surname" name="surname">
          <Input />
        </Form.Item>
      </Form>
    </Create>
  );
};

import { useForm, Create } from "@refinedev/antd";
import { Form, Input } from "antd";
import React from "react";

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

  const handleOnFinish = (values) => {
    return {
      fullName: `${values.name} ${values.surname}`,
    };
  };
return (
    <Create saveButtonProps={saveButtonProps}>
      <Form 
        {...formProps} 
        onFinish={(values) => formProps.onFinish?.(handleOnFinish(values))}
        layout="vertical"
      >
        <Form.Item label="Name" name="name">
          <Input />
        </Form.Item>
        <Form.Item label="Surname" name="surname">
          <Input />
        </Form.Item>
      </Form>
    </Create>
  );
};

This approach ensures that the form values are transformed before being submitted, while still utilizing the onFinish function provided by formProps. For more information on using useForm and handling form submissions in Refine with Ant Design, you can refer to the Refine Ant Design useForm documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@1257731147509661728> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Transform Antd useForm Values on Submission

Did you find this page helpful?