Form support clearOnDestroy (#48921)

* feat: form support clearOnDestroy

* feat: demo

* feat: demo

components/form/demo/form-in-modal.tsx

@@ -1,5 +1,4 @@
-import React, { useEffect, useState } from 'react';
-import type { FormInstance } from 'antd';
+import React, { useState } from 'react';
 import { Button, Form, Input, Modal, Radio } from 'antd';
 
 interface Values {
@@ -8,85 +7,8 @@ interface Values {
   modifier?: string;
 }
 
-interface CollectionCreateFormProps {
-  initialValues: Values;
-  onFormInstanceReady: (instance: FormInstance<Values>) => void;
-}
-
-const CollectionCreateForm: React.FC<CollectionCreateFormProps> = ({
-  initialValues,
-  onFormInstanceReady,
-}) => {
-  const [form] = Form.useForm();
-  useEffect(() => {
-    onFormInstanceReady(form);
-  }, []);
-  return (
-    <Form layout="vertical" form={form} name="form_in_modal" initialValues={initialValues}>
-      <Form.Item
-        name="title"
-        label="Title"
-        rules={[{ required: true, message: 'Please input the title of collection!' }]}
-      >
-        <Input />
-      </Form.Item>
-      <Form.Item name="description" label="Description">
-        <Input type="textarea" />
-      </Form.Item>
-      <Form.Item name="modifier" className="collection-create-form_last-form-item">
-        <Radio.Group>
-          <Radio value="public">Public</Radio>
-          <Radio value="private">Private</Radio>
-        </Radio.Group>
-      </Form.Item>
-    </Form>
-  );
-};
-
-interface CollectionCreateFormModalProps {
-  open: boolean;
-  onCreate: (values: Values) => void;
-  onCancel: () => void;
-  initialValues: Values;
-}
-
-const CollectionCreateFormModal: React.FC<CollectionCreateFormModalProps> = ({
-  open,
-  onCreate,
-  onCancel,
-  initialValues,
-}) => {
-  const [formInstance, setFormInstance] = useState<FormInstance>();
-  return (
-    <Modal
-      open={open}
-      title="Create a new collection"
-      okText="Create"
-      cancelText="Cancel"
-      okButtonProps={{ autoFocus: true }}
-      onCancel={onCancel}
-      destroyOnClose
-      onOk={async () => {
-        try {
-          const values = await formInstance?.validateFields();
-          formInstance?.resetFields();
-          onCreate(values);
-        } catch (error) {
-          console.log('Failed:', error);
-        }
-      }}
-    >
-      <CollectionCreateForm
-        initialValues={initialValues}
-        onFormInstanceReady={(instance) => {
-          setFormInstance(instance);
-        }}
-      />
-    </Modal>
-  );
-};
-
 const App: React.FC = () => {
+  const [form] = Form.useForm();
   const [formValues, setFormValues] = useState<Values>();
   const [open, setOpen] = useState(false);
 
@@ -102,12 +24,44 @@ const App: React.FC = () => {
         New Collection
       </Button>
       <pre>{JSON.stringify(formValues, null, 2)}</pre>
-      <CollectionCreateFormModal
+      <Modal
         open={open}
-        onCreate={onCreate}
+        title="Create a new collection"
+        okText="Create"
+        cancelText="Cancel"
+        okButtonProps={{ autoFocus: true, htmlType: 'submit' }}
         onCancel={() => setOpen(false)}
-        initialValues={{ modifier: 'public' }}
-      />
+        destroyOnClose
+        modalRender={(dom) => (
+          <Form
+            layout="vertical"
+            form={form}
+            name="form_in_modal"
+            initialValues={{ modifier: 'public' }}
+            clearOnDestroy
+            onFinish={(values) => onCreate(values)}
+          >
+            {dom}
+          </Form>
+        )}
+      >
+        <Form.Item
+          name="title"
+          label="Title"
+          rules={[{ required: true, message: 'Please input the title of collection!' }]}
+        >
+          <Input />
+        </Form.Item>
+        <Form.Item name="description" label="Description">
+          <Input type="textarea" />
+        </Form.Item>
+        <Form.Item name="modifier" className="collection-create-form_last-form-item">
+          <Radio.Group>
+            <Radio value="public">Public</Radio>
+            <Radio value="private">Private</Radio>
+          </Radio.Group>
+        </Form.Item>
+      </Modal>
     </>
   );
 };

components/form/index.en-US.md

@@ -88,6 +88,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | onFinish | Trigger after submitting the form and verifying data successfully | function(values) | - |  |
 | onFinishFailed | Trigger after submitting the form and verifying data failed | function({ values, errorFields, outOfDate }) | - |  |
 | onValuesChange | Trigger when value updated | function(changedValues, allValues) | - |  |
+| clearOnDestroy | Clear form values when the form is uninstalled | boolean | false | 5.18.0 |
 
 ### validateMessages
 

components/form/index.zh-CN.md

@@ -89,6 +89,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ylFATY6w-ygAAA
 | onFinish | 提交表单且数据验证成功后回调事件 | function(values) | - |  |
 | onFinishFailed | 提交表单且数据验证失败后回调事件 | function({ values, errorFields, outOfDate }) | - |  |
 | onValuesChange | 字段值更新时触发回调事件 | function(changedValues, allValues) | - |  |
+| clearOnDestroy | 当表单被卸载时清空表单值 | boolean | false | 5.18.0 |
 
 ### validateMessages
 

package.json

@@ -136,7 +136,7 @@
     "rc-dialog": "~9.4.0",
     "rc-drawer": "~7.1.0",
     "rc-dropdown": "~4.2.0",
-    "rc-field-form": "~2.0.1",
+    "rc-field-form": "~2.1.0",
     "rc-image": "~7.7.0",
     "rc-input": "~1.4.5",
     "rc-input-number": "~9.0.0",