Instance created by `useForm` is not connected to any Form element. Forget to pass `form` prop with antd pro

Question

Today when I add the Form fields reset code in antd pro:

import React, { useEffect } from 'react';
import {
  ProFormText,
  ProFormTextArea,
  ModalForm,
  ProFormSelect,
} from '@ant-design/pro-form';
import { useIntl, FormattedMessage, useModel } from 'umi';
import { getDictPair, getDictRenderText } from '@/utils/data/dictionary';
import { Form } from 'antd';

export type FormValueType = {
  company?: string;
  address?: string;
  city?: string;
  status?: number;
} & Partial<API.InterviewListItem>;

export type UpdateFormProps = {
  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
  onSubmit: (values: FormValueType) => Promise<void>;
  updateModalVisible: boolean;
  values: Partial<API.InterviewListItem>;
};

const UpdateForm: React.FC<UpdateFormProps> = (props) => {
  const intl = useIntl();
  const [form] = Form.useForm()
  const { initialState } = useModel('@@initialState');

  useEffect(() => {
    form.resetFields();
    form.setFieldsValue(props.values);
  });

  return (
    <ModalForm
    form = {form}
    title={intl.formatMessage({
      id: 'pages.apps.jobs.interview.updateInterview',
      defaultMessage: 'New rule',
    })}
    width="400px"
    visible={props.updateModalVisible}
    onVisibleChange={(value)=>{
      if(!value){
        props.onCancel();
      }
    }}
    onFinish={props.onSubmit}
    >
      <ProFormText
        initialValue={props.values.company}
        name="company"
        label={intl.formatMessage({
          id: 'pages.apps.jobs.interview.searchTable.company',
          defaultMessage: '',
        })}
        width="md"
        rules={[
          {
            required: true,
            message: (
              <FormattedMessage
                id="pages.searchTable.updateForm.ruleName.nameRules"
                defaultMessage=""
              />
            ),
          },
        ]}
      />
    </ModalForm>
  );
};

export default UpdateForm;

the console shows warning info like this:

devScripts.js:6523 Warning: Instance created by `useForm` is not connected to any Form element. Forget to pass `form` prop?

I already read this question: Warning: Instance created by `useForm` is not connect to any Form element but I did not found the getContainer properties in antd pro. what should I do to fix this problem? Also tried the forceRender but still did not fixed this problem.

Answer 1

This is because when Modal visible is flase, the child nodes are not rendered, and the form cannot find the corresponding Form at this time. Therefore, you should perform form-related operations when visible is true. For example:

import React, { useEffect } from 'react';
import {
  ProFormText,
  ProFormTextArea,
  ModalForm,
  ProFormSelect,
} from '@ant-design/pro-form';
import { useIntl, FormattedMessage, useModel } from 'umi';
import { getDictPair, getDictRenderText } from '@/utils/data/dictionary';
import { Form } from 'antd';

export type FormValueType = {
  company?: string;
  address?: string;
  city?: string;
  status?: number;
} & Partial<API.InterviewListItem>;

export type UpdateFormProps = {
  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
  onSubmit: (values: FormValueType) => Promise<void>;
  updateModalVisible: boolean;
  values: Partial<API.InterviewListItem>;
};

const UpdateForm: React.FC<UpdateFormProps> = (props) => {
  const intl = useIntl();
  const [form] = Form.useForm()
  const { initialState } = useModel('@@initialState');

  useEffect(() => {
    if(props.updateModalVisible) {
       form.resetFields();
       form.setFieldsValue(props.values);
    }
  });

  return (
    <ModalForm
    form = {form}
    title={intl.formatMessage({
      id: 'pages.apps.jobs.interview.updateInterview',
      defaultMessage: 'New rule',
    })}
    width="400px"
    visible={props.updateModalVisible}
    onVisibleChange={(value)=>{
      if(!value){
        props.onCancel();
      }
    }}
    onFinish={props.onSubmit}
    >
      <ProFormText
        initialValue={props.values.company}
        name="company"
        label={intl.formatMessage({
          id: 'pages.apps.jobs.interview.searchTable.company',
          defaultMessage: '',
        })}
        width="md"
        rules={[
          {
            required: true,
            message: (
              <FormattedMessage
                id="pages.searchTable.updateForm.ruleName.nameRules"
                defaultMessage=""
              />
            ),
          },
        ]}
      />
    </ModalForm>
  );
};

export default UpdateForm;