rival-black•2w ago

form.setFieldsValue in 5.0

In Refine 4.0, you could set a field value with const { form } = useForm("customer"); and do a form.setFieldsValue("name"), the setFieldsValue method seems not existing anymore in refine 5.0. How to set a field Value in refine 4.0 ?

11 Replies

kapa.ai•2w ago

Hi @quick691. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In v5, useForm from @refinedev/core is headless and does not expose UI‑library form instances (like Ant Design’s form with setFieldsValue) anymore. Instead, you manage values yourself (for core) or use the UI/form library’s own APIs when using an integration. 1. With @refinedev/core useForm (headless) You keep field values in your own state and pass them to onFinish yourself. To “set a field value”, update your local state:

import { useForm } from "@refinedev/core";

const EditPage = () => {
  const { query, onFinish } = useForm<IProduct, HttpError, FormValues>({
    resource: "products",
    action: "edit",
    id: 123,
  });

  const defaultValues = query?.data?.data;

  const [values, setValues] = React.useState<FormValues>({
    name: defaultValues?.name || "",
    material: defaultValues?.material || "",
  });

  React.useEffect(() => {
    setValues({
      name: defaultValues?.name || "",
      material: defaultValues?.material || "",
    });
  }, [defaultValues]);

  const setFieldValue = (name: keyof FormValues, value: string) => {
    setValues((prev) => ({ ...prev, [name]: value }));
  };

  const onSubmit = (e) => {
    e.preventDefault();
    onFinish(values);
  };

  return (
    <form onSubmit={onSubmit}>
      <input
        name="name"
        value={values.name}
        onChange={(e) => setFieldValue("name", e.target.value)}
      />
      <input
        name="material"
        value={values.material}
        onChange={(e) => setFieldValue("material", e.target.value)}
      />
      <button type="submit">Submit</button>
    </form>
  );
};

import { useForm } from "@refinedev/core";

const EditPage = () => {
  const { query, onFinish } = useForm<IProduct, HttpError, FormValues>({
    resource: "products",
    action: "edit",
    id: 123,
  });

  const defaultValues = query?.data?.data;

  const [values, setValues] = React.useState<FormValues>({
    name: defaultValues?.name || "",
    material: defaultValues?.material || "",
  });

  React.useEffect(() => {
    setValues({
      name: defaultValues?.name || "",
      material: defaultValues?.material || "",
    });
  }, [defaultValues]);

  const setFieldValue = (name: keyof FormValues, value: string) => {
    setValues((prev) => ({ ...prev, [name]: value }));
  };

  const onSubmit = (e) => {
    e.preventDefault();
    onFinish(values);
  };

  return (
    <form onSubmit={onSubmit}>
      <input
        name="name"
        value={values.name}
        onChange={(e) => setFieldValue("name", e.target.value)}
      />
      <input
        name="material"
        value={values.material}
        onChange={(e) => setFieldValue("material", e.target.value)}
      />
      <button type="submit">Submit</button>
    </form>
  );
};

Here, setFieldValue("name", "John") is the v5 equivalent of “setting a field value” in the core hook. [useForm usage; Forms basic usage] 2. With UI integrations or React Hook Form - Ant Design / Mantine / MUI: their useForm wrappers in v5 still manage form state for their respective libraries, but the docs provided here don’t show any form.setFieldsValue equivalent. The knowledge sources only show using formProps/register and submitting via onFinish, not imperative field setting. - @refinedev/react-hook-form: you should use register/Controller and their onChange handlers to update values, not setValue for general change handling. [Forms FAQ; RHForm comment] Because the v5 docs and issues in the provided sources do not mention a direct replacement like form.setFieldsValue on useForm’s return value, I cannot point to an API-identical method in v5. The recommended pattern in the docs is to control values yourself (for core) or rely on the underlying form library’s normal mechanisms (AntD Form instance, React Hook Form’s register/Controller, etc.). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

rival-blackOP•2w ago

@kapa.ai I was talking of useForm in @refinedev/antd library

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- For @refinedev/antd in v5 you no longer work with your own Form instance by default (i.e. you don’t normally destructure { form } and call form.setFieldsValue). Instead: - useForm gives you formProps for the Ant Design <Form> and manages initial values, submit, loading, etc. automatically. [Antd useForm intro] - When action is "edit" or "clone", initialValues inside formProps is filled from the record fetched via useOne. [Antd useForm returns] So the “normal” v5 pattern is:

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

export const PostEdit = () => {
  const { formProps, saveButtonProps } = useForm<IPost>();

  return (
    <Form {...formProps} layout="vertical">
      <Form.Item label="Title" name="title">
        <Input />
      </Form.Item>
      {/* ... */}
    </Form>
  );
};

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

export const PostEdit = () => {
  const { formProps, saveButtonProps } = useForm<IPost>();

  return (
    <Form {...formProps} layout="vertical">
      <Form.Item label="Title" name="title">
        <Input />
      </Form.Item>
      {/* ... */}
    </Form>
  );
};

If you need to modify the submitted data (what previously might have prompted you to call setFieldsValue imperatively), you override onFinish and call the hook’s onFinish with transformed values: [Antd useForm FAQ]

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

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

  const handleOnFinish = (values: any) => {
    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";

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

  const handleOnFinish = (values: any) => {
    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>
  );
};

The provided v5 docs for @refinedev/antd do list form as a return value (“a <Form> instance”), but they do not show or document a form.setFieldsValue usage or equivalent. [Antd useForm returns] Because of that, I can’t confidently confirm that you can/should still call form.setFieldsValue the same way as in v4 based on these sources. From the official examples, the supported v5 approach in @refinedev/antd is: - Let refine control field values via formProps (including initialValues for edit/clone), and - Use onFinish to adjust data before submission, instead of imperatively pushing values into the form. If you specifically need imperative updates (like setFieldsValue) and they’re not visible in the docs, the knowledge sources don’t provide enough detail to show a supported v5 pattern beyond the above. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

rival-blackOP•2w ago

@kapa.ai I was talking of @refinedev/antd^6.0.0 sorry

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- In @refinedev/antd v6, useForm still returns the underlying Ant Design Form instance as form, and that instance is the standard AntD one. The docs say:

form – It’s a <Form> instance. You can refer to Antd <Form> documentation for more information. [Antd useForm return values]

Since it’s a normal Ant Design Form instance, you can call form.setFieldsValue exactly as in AntD:

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

export const CustomerEdit = () => {
  const { form, formProps, saveButtonProps } = useForm();

  // Example: imperatively set a field value
  const setName = () => {
    form.setFieldsValue({ name: "John Doe" });
  };

  return (
    <>
      <Form {...formProps} layout="vertical">
        <Form.Item label="Name" name="name">
          <Input />
        </Form.Item>
      </Form>

      <button onClick={setName}>Set Name</button>
    </>
  );
};

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

export const CustomerEdit = () => {
  const { form, formProps, saveButtonProps } = useForm();

  // Example: imperatively set a field value
  const setName = () => {
    form.setFieldsValue({ name: "John Doe" });
  };

  return (
    <>
      <Form {...formProps} layout="vertical">
        <Form.Item label="Name" name="name">
          <Input />
        </Form.Item>
      </Form>

      <button onClick={setName}>Set Name</button>
    </>
  );
};

So in @refinedev/antd@6.0.0, the way to set a field value is: 1. Destructure form from useForm’s return value, and
2. Use AntD’s form.setFieldsValue({ fieldName: value }). The knowledge sources don’t show a breaking change removing form or setFieldsValue; they only document form as a regular AntD Form instance, so this remains the supported pattern. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

rival-blackOP•2w ago

@kapa.ai when I destructure form from useForm’s return value, I got a FormInstance with only focusField(), getFirldInstance() and scrollToField() methods

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The behavior you describe (getting a very “lean” FormInstance with only a few methods) is not documented in the refine v5/v6 Ant Design form docs we have here. According to the official @refinedev/antd useForm docs, the form return value is:

Ant Design form instance | FormInstance [Antd useForm API]

and they explicitly say:

It’s a <Form> instance. You can refer to Antd <Form> documentation for more information. [Antd useForm return values]

So, based on the docs: - form should be a normal AntD FormInstance, which includes setFieldsValue, getFieldValue, etc. - refine does not document any reduced/limited FormInstance type for form. However, the knowledge sources do not show: - Any version-specific change in @refinedev/antd@6.x that would remove setFieldsValue, or - Any example of the “stripped” FormInstance you’re seeing. Because of that, I can’t explain from the docs alone why your form only has focusField, getFieldInstance, and scrollToField, nor can I point to a refine-specific alternative API for setting a value when setFieldsValue is missing. From the available information, the only documented, supported ways to influence values are: 1. Let refine manage values via formProps (initialValues for edit/clone). [Antd forms intro; useForm usage] 2. Transform data on submit using a custom onFinish that calls the hook’s onFinish with modified values. [Modify data before submission; Antd useForm FAQ] The docs do not provide any explicit replacement for form.setFieldsValue in @refinedev/antd@6.0.0, so I can’t give you a documented API-equivalent solution beyond these patterns. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

form.setFieldsValue in 5.0

Did you find this page helpful?