Instance created by `useForm` is not connect to any Form element. Forget to pass `form` prop? 明明就是按照

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

Reproduction link

https://next.ant.design/components/form-cn/#components-form-demo-form-in-modal

Steps to reproduce

就直接用useForm 就行了。我参考的是弹出层中的示例。

What is expected?

我只想能正常的用这个useForm

What is actually happening?

index.js:1 Warning: Instance created by useForm is not connect to any Form element. Forget to pass form prop?
in CollectionCreateForm ....

const [form] = Form.useForm();
form.setFieldsValue({
categoryName: caseDetail.categoryName,

Hello @LamTech . Please provide a online reproduction by forking this link https://u.ant.design/codesandbox-repro or a minimal GitHub repository. Issues labeled by Need Reproduce will be closed if no activities in 7 days.

你好 @LamTech , 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击此处创建一个 codesandbox 或者提供一个最小化的 GitHub 仓库。7 天内未跟进的 issue 将会被自动关闭。

All reactions All reactions

在使用V4版本（form存在于函数组件中）时我也是这问题困扰了整整两天，差点崩溃了（报错但不影响使用）最后细读 https://ant.design/和https://next.ant.design/发现函数组件和类中使用form一定要理解并区分函数组件中的
useEffect(() => {
return () => {
form.resetFields();
在return ()=>{....}中触发销毁的是整个函数组件（没测试此时form是否被销毁）
文档说明：destroyOnClose | 关闭时销毁 Modal 里的子元素，默认 false。forceRender | 强制渲染 Modal，默认false。
解决方法：Modal的forceRender=true，destroyOnClose=false，此时Modal销毁时（关闭），不会报错。内部代码执行时可以找到form，但会报输入控件id重复警告（比错误要优雅点）。

All reactions

if your code involved setFieldsValue or other functions alike, call it after nodes rendered

useEffect(() => {
  form.setFieldsValue({
    id: 1
}, [])
componentDidMount() {
  form.setFieldsValue({
    id: 1
It solved my problem
  nakulrathore, icebay, MuggleFighter, BahaaZidan, johnyzv, forvenus, jzamora5, jtaylorz, and ydyoto reacted with thumbs up emoji
  Plortinus, ltjackll, timmyLan, deligent-ant, jjalonso, amourzenkov, etoup, dmwin72015, alihesari, HDaghash, and 8 more reacted with confused emoji
    All reactions
          I solved.  In drawer, use getContainer={false} can resolved it.  I think Modal is the same.

我在抽屉里用getContainer={false}就好了 Modal应该也可以  出现同样问题的可以试一下
  loocor, neoliao, linxianxi, raohong, fwiech, WuJiY, i2rkmen, KingThq, yjdjiayou, yordanova, and 9 more reacted with thumbs up emoji
  userlab-josuesosa reacted with laugh emoji
  userlab-josuesosa and xiaoqiang-zhao reacted with hooray emoji
  neoliao, linxianxi, fwiech, userlab-josuesosa, xiaoqiang-zhao, skylingfly, and akmalnawfer reacted with heart emoji
  userlab-josuesosa, xiaoqiang-zhao, skylingfly, and akmalnawfer reacted with rocket emoji
    All reactions
Modal 中的 Form 默认不会渲染，可以参考 @se7en00 的回复 给 Modal 加上 forceRender。或者在 Modal 显示且渲染完成后再调用 setFieldsValue 和 resetFields。
在Modal上加上forceRender这个属性 根本没有用
在使用V4版本（form存在于函数组件中）时我也是这问题困扰了整整两天，差点崩溃了（报错但不影响使用）最后细读https://ant.design/和https://next.ant.design/发现函数组件和类中使用form一定要理解并区分函数组件中的

useEffect(() => {

return () => {

form.resetFields();

在return ()=>{....}中触发销毁的是整个函数组件（没测试此时form是否被销毁）

文档说明：destroyOnClose | 关闭时销毁 Modal 里的子元素，默认 false。forceRender | 强制渲染 Modal，默认false。

解决方法：Modal的forceRender=true，destroyOnClose=false，此时Modal销毁时（关闭），不会报错。内部代码执行时可以找到form，但会报输入控件id重复警告（比错误要优雅点）。
这个方法可以解决，但是如果在Modal外层先用三元运算符visible ? 判断下且把forceRender=true，destroyOnClose=false这样：

{visible ? : <Modal visible={visible} forceRender destroyOnClose={false}><Form form={form} onFinish={handleFinish}>...</Form></Modal> : null}

就出问题: 只显示mask 不显示弹框
          这样设置forceRender=true，destroyOnClose=false，在弹框onOk或者onCancel关闭时候再使用form.resetFields()就不会再报错了
  visible={visible} 
  forceRender 
  destroyOnClose={false}
  <Form form={form} onFinish={handleFinish}>...</Form>
</Modal>```
但是如果在Modal外层先用三元运算符visible ? 判断下且把forceRender=true，destroyOnClose=false这样：
```{visible 
? <Modal 
  visible={visible}
  forceRender 
  destroyOnClose={false}
  <Form form={form} onFinish={handleFinish}>...</Form>
</Modal> 
: null
就出问题: 只显示mask 不显示弹框
在使用V4版本（form存在于函数组件中）时我也是这问题困扰了整整两天，差点崩溃了（报错但不影响使用）最后细读https://ant.design/和https://next.ant.design/发现函数组件和类中使用form一定要理解并区分函数组件中的

useEffect(() => {

return () => {

form.resetFields();

在return ()=>{....}中触发销毁的是整个函数组件（没测试此时form是否被销毁）

文档说明：destroyOnClose | 关闭时销毁 Modal 里的子元素，默认 false。forceRender | 强制渲染 Modal，默认false。

解决方法：Modal的forceRender=true，destroyOnClose=false，此时Modal销毁时（关闭），不会报错。内部代码执行时可以找到form，但会报输入控件id重复警告（比错误要优雅点）。
我也遇到这个问题，我是这样方法解决的

Modal配置forceRender | 强制渲染

Modla 表单里面 name={['modal', 'cityCode']}

筛选 表单里面 name={['search', 'cityCode']} or name='cityCode'

这样就可以 解决所有的warning 了 也不会报那个 Found 2 elements with non-unique id 警告了⚠
【表单名称，会作为表单字段 id 前缀使用】所以没有 Found 2 elements with non-unique id 警告了
          getContainer={false} as modal property + having the modal visible when I call form.resetFields() works for me to not show the warning
useEffect(() => {
    if (form && visible) {
      form.resetFields();
  }, [visible]);
In this way, destroyOnClose can be also true
  singagain, alextrastero, Last-Order, seanyangGood, and byc996 reacted with thumbs up emoji
  singagain and seanyangGood reacted with hooray emoji
  singagain and edshav reacted with rocket emoji
    All reactions
          I use useRef instead of Form.useFrom to get Form instance, it works for me
  const [visible, setVisible] = useState(false)
  let form = useRef(null)
  const closeModal = () => {
    setVisible(false)
    form.resetFields()
  return (
    <Modal
      title="test"
      visible={visible}
      onCancel={closeModal}
      footer={null}
        name="test"
        layout="vertical"
        onFinish={onFinish}
        ref={instance => { form = instance }}
        <Form.Item
          label="item"
          name="item"
          <Input />
        </Form.Item>
        <Form.Item
          style={{
            textAlign: 'right',
          <Space size="middle">
            <Button type="primary" htmlType="submit">
             submit
            </Button>
            <Button onClick={closeModal}>
             cancle
            </Button>
          </Space>
        </Form.Item>
      </Form>
    </Modal>
          Just my two cents: this error appeared for me when I tried to reset a form that was not mounted, so adding a dependency to a required constant solved it.
useEffect(() => {
  if (data) { // data is used to populate initialValues
    form.resetFields();
}, [form, data])




    

EDIT: pretty much what @fabripeco said :D
          I use form in  Popover, useRef is usable for me, I think it's usable for modal
const formRef = useRef(null);
<Popover
  content={renderEdit()}
  visible={isEdit}
  onVisibleChange={onToggleEdit}
  <span onClick={onToggleEdit}>
    {name}
  </span>
</Popover>
function renderEdit() {
  return (
      initialValues={{ newName: name }}
      form={form}
      ref={formRef}
    </Form>
function onToggleEdit() {
  if (isEdit) {
    toggleEdit(false);
  } else if (!isEdit) {
    if (formRef.current) {
      form.setFieldsValue({
        newName: name
    toggleEdit(true);
My workaround, create a ref by useState when Form was rendered, then check the ref before use the form instance.
interface FormModalProps {
  data?: RoleProps;
  visible: boolean;
  onCancel?: () => void;
  onSubmit?: (values: Store) => void;
  submitting: boolean;
const FormModal: React.FC<FormModalProps> = props => {
  const [form] = Form.useForm();
  const [formRef, setFormRef] = useState();  // <---- set the ref when Form Rendered
  const { data, onSubmit, onCancel, visible, submitting } = props;
  // reset Form when modal close
  useEffect(() => {
    if ( !props.visible && formRef) {  // <---- check ref before use the form instance
      form.resetFields();
  }, [props.visible]);
  // fill Form when modal open
  useEffect(() => {
    if (visible && formRef) {   // <---- check ref before use the form instance
      form.setFieldsValue({
        ...data,
      });
  }, [props.data]);
  // handle form onFinish
  const handleFormFinish = (values: Store) => {
    if (onSubmit) {
      onSubmit(values);
  // handle modal  ok
  const handleOk = () => {
    if (!form) return;
    form.submit();
  return (
    <Modal
      title="Modal"
      confirmLoading={submitting}
      onOk={handleOk}
      onCancel={onCancel}
      visible={visible}
      width={640}
      <Form ref={setFormRef} form={form} onFinish={handleFormFinish}>
        <Form.Item name="title" label="Title" >
          <Input />
        </Form.Item>
      </Form>
    </Modal>
No more warning again!
solved perfectly!
I solved. In drawer, use getContainer={false} can resolved it. I think Modal is the same.

我在抽屉里用getContainer={false}就好了 Modal应该也可以 出现同样问题的可以试一下
Thank you for solving my problem
我这样修改后，是没有报错的。
const UserModel = (props: any) => {
  const [form] = Form.useForm();
  const [confirmLoading, setConfirmLoading] = React.useState(false);
  let formData = {
    name: "",
    age: "",
    address: "",
    ...props.userInfo
//添加props.visible 根据一定的依赖条件来触发的副作用
  useEffect(() => {
    formData = {
      ...formData,
      ...props.userInfo
    form.setFieldsValue(formData);
  }, [props.visible]);
  // form.setFieldsValue(formData)
  // 确定
  const handleOk = () => {
    // TODO:form表单
    props.onOk()
  const handleOnSubmit = () => {
  // 取消
  const handleCancel = () => {
    props.onCancel()
  const onFinish = (values: any) => {
    console.log(values);
    setConfirmLoading(true)
    setTimeout(() => {
      props.onOk(values)
      setConfirmLoading(false)
  const onFinishFailed = () => {
    // props.onFinish()
//添加 forceRender 
  return (
    <Modal
      forceRender
      title="Title"
      visible={props.visible}
      onOk={handleOk}
      confirmLoading={confirmLoading}
      onCancel={handleCancel}
      //去掉底部
      footer={[]}
        name="basic"
        form={form}
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        initialValues={formData}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        <Form.Item
          label="name"
          name="name"
          rules={[{ required: true, message: 'Please input your username!' }]}
          <Input />
        </Form.Item>
        <Form.Item
          label="age"
          name="age"
          rules={[{ required: true, message: 'Please input your age!' }]}
          <Input />
        </Form.Item>
        <Form.Item
          label="address"
          name="address"
          rules={[{ required: true, message: 'Please input your age!' }]}
          <Input />
        </Form.Item>
        <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 8, span: 16 }}>
          <Checkbox>Remember me</Checkbox>
        </Form.Item>
        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
        </Form.Item>
      </Form>
    </Modal>
          基本概念就是確保你的Form在設定參數時，必須已經渲染完成就不會出現這錯誤。 我單純將setFieldsValue移到Modal後方就不會報錯了。




    

const [form] = Form.useForm();
   const onEditProject = (record) => {
       Modal.confirm({
           width: 800,
           title: 'edit',
           icon: <EditOutlined style={{ color: '#096dd9' }} />,
           bodyStyle: { padding: 10 },
           // forceRender: true,
           // destroyOnClose: false,
           content: (
               <Form form={form} labelCol={{ offset: 1 }} wrapperCol={{ span: 20, offset: 1 }}>
                   <Form.Item
                       name='name'
                       label='name'
                       rules={[
                               required: true,
                       <Input />
                   </Form.Item>
                   <Form.Item
                       name='status'
                       label='status
                       rules={[
                               required: true,
                       <Select>
                           <Select.Option value='completed'>completed</Select.Option>
                           <Select.Option value='in progress'>in progress</Select.Option>
                       </Select>
                   </Form.Item>
                   <Form.Item
                       name='color'
                       label='color'
                       rules={[
                               required: true,
                       <CirclePicker width='100%' colors={colors} color={record.color} />
                   </Form.Item>
                   <Form.Item
                       name='description'
                       label='description'
                       rules={[
                               required: true,
                       <Input.TextArea rows={5} maxLength={300} showCount />
                   </Form.Item>
               </Form>
           okText: 'edit',
           okType: 'primary',
           cancelText: 'cancel',
           centered: true,
           onOk() {
               setIsLoading(true);
               api.updateProject(record.id, {
                   name: form.getFieldValue('name'),
                   status: form.getFieldValue('status'),
                   description: form.getFieldValue('description'),
                   color: form.getFieldValue('color').hex,
                   .then(() => {
                       setIsLoading(false);
                   .catch(() => {
                       setIsLoading(false);
           onCancel() {},
       form.setFieldsValue({
           name: record.name,
           status: record.status,
           description: record.description,
           color: record.color,
// ...
useEffect(() => {
  form.setFieldsValue({ name: collectionName }) // this warns
}, [collectionName])
if (conditionalInitiallyTrue) {
  return <span>None</span>
return (
    form={form}
    initialValues={...}
    onFinish={...}
How did I solve it: using ref.
// ...
const formRef = useRef(null) // set initial ref as null
useEffect(() => {
  if (formRef.current) // verify ref link with current
    form.setFieldsValue({ name: collectionName })
}, [collectionName, conditionalInitiallyTrue, form]) // run useEffect when formRef updates
if (conditionalInitiallyTrue) {
  return <span>None</span>
// set ref in Form (fomRef.current will update as soon this appears)
return (
    form={form}
    initialValues={...}
    onFinish={...}
    ref={formRef}
Not sure if this is helpful but, let me know.
It happen because form element have not been rendered, but You have set values for form. I think this is basic knowledge about react and hooks.. You can use setTimeout for waiting rendered form.
But best way to set initial value of form is
   initialValues={{ 
      name: 'Hafid',
      age: '35'
onFinish={onFinish}
or with this method
const [values, setValues] = React.useState({})
React.useEffect(()=>{
     // get data values from web service or API
     // fecth(...)
     if (values_from_api){
        setValues(values_from_api);
}, [])
return <>
   initialValues={values}
onFinish={onFinish}
Thank you a lot, you have saved my day
          ant design的Modal组件会在Form表单之前创建，因此当页面初始化时form对象会找不到可关联的Form表单.

我的解决方法在提前证明form：

const [form] = Form.useForm()

form.setFieldsValue(props.editContent)

const modalForm=(
.....)
return (
{modalForm}
第一个场景

问题：多次打开同一个Modal，在异步接口请求返回结果后，使用  formInstance.setFieldsValue 初始化表单字段；

原因：单例Modal上的表单未重新绑定；新生成的表单实例绑定发生在调用之前

解决方法：Form上设置 preserve={false}，并且 Modal上设置了 destroyOnClose
第二个场景

问题：页面useEffect 初始化异步接口请求返回结果后，使用  formInstance.setFieldsValue 初始化多个Tabs中的表单字段；

原因：未展示的Tabs还未进行表单绑定

解决方法：未展示的Tabs在 onChange 中进行按需初始化。
问题本质原因是，Form.useForm() 生成的 FormInstance 在没有绑定 渲染视图的情况下，就已经被使用了。所以你需要确保视图渲染绑定视图，或者重复渲染的视图重新绑定了实例。
          You can always check, if modal is visible, before making custom setFieldsValue invocation.
const CustomModal = ({ isVisible }) => {
  const [form] = Form.useForm();
  useEffect(() => {
    if (isVisible) {
      form.setFieldsValue({ ... })
  }, [form, isVisible]);
  return <Modal isVisible={isVisible} />
          Oct 18th 2022, I solved this warning by this solution. Use the "useRef" to solve
My case was because Form was conditionally rendered, like:
// ...
useEffect(() => {
  form.setFieldsValue({ name: collectionName }) // this warns
}, [collectionName])
if (conditionalInitiallyTrue) {
  return <span>None</span>
return (
    form={form}
    initialValues={...}
    onFinish={...}
How did I solve it: using ref.
// ...
const formRef = useRef(null) // set initial ref as null
useEffect(() => {
  if (formRef.current) // verify ref link with current
    form.setFieldsValue({ name: collectionName })
}, [collectionName, conditionalInitiallyTrue, form]) // run useEffect when formRef updates
if (conditionalInitiallyTrue) {
  return <span>None</span>
// set ref in Form (fomRef.current will update as soon this appears)
return (
    form={form}
    initialValues={...}
    onFinish={...}
    ref={formRef}
Not sure if this is helpful but, let me know.