Warning: Instance created by `useForm` is not connect to any Form element

Question

I have an application where built a form and i want to setDefaultValue for the form. I used: const [form] = Form.useForm();. My form tag looks like bellow:

<Form form={form} name="basic" onFinish={onFinish} onFinishFailed={onFinishFailed}>

And i try to set defaultValue:

form.setFieldsValue({
  name: object.name,
});

Here i get the next warning: Warning: Instance created by `useForm` is not connect to any Form element. Forget to pass `form` prop?

I saw many answers with this topic, but they solved the issue by adding form={form}. In my case it doesn't work. What could be the issue?

Answer 1

If you are using Form component inside Modal component, pls remind set getContainer={false} to Modal component.

Here is the link: https://ant.design/components/modal/

Answer 2

Before Modal opens, children elements do not exist in the view. You can set forceRender on Modal to pre-render its children. source

  <Modal forceRender visible={visible} onOk={okHandler} onCancel={closeHandler}>
    <Form form={form}>
      <Form.Item name="user">
        <Input />
      </Form.Item>
    </Form>
  </Modal>

Answer 3

I think it's warning because you call form method

form.setFieldsValue({
    note: text.note,
    gender: text.gender
});

before form instance patch on the form component <Form form={form}.... So I think you should call it when componentDidMount

useEffect(() => {
    form.setFieldsValue({ note: "2", gender: "demo" });
    setText({ note: "2", gender: "demo" });
}, []);

or

useEffect(() => {
    setText({ note: "2", gender: "demo" });
}, []);

useEffect(() => {
    form.setFieldsValue({ note: text.note, gender: text.gender });
}, [text]);

Answer 4

I fixed the problem by using form.__INTERNAL__.name as this will be undefined if the instance created by useForm is not connected to any form element (remember to set name property on your form element or form.__INTERNAL__.name will be undefined in both cases).

const form = useForm();
if (form.__INTERNAL__.name) {
   // do form logic here
   form.setFieldsValue({name: "Ahmed Hamed"});
}

...
<Form name="myForm" form={form}>...</Form>
...

Answer 5

setTimeout(function () {
      form.setFieldsValue(node);
    },0);

This is how I solved it

Answer 6

The following helped me.

I deleted the code:

const [form] = Form.useForm();

The assignment of initial values is done like this:

<Form 
  name="basic"
  onFinish={onFinish}
  onFinishFailed={onFinishFailed}
  initialValues={{
    name: object.name,
  }}
>