docs(form): add docs for useForm preserve (#41210)

components/form/index.en-US.md

@@ -354,9 +354,9 @@ export default () => {
 
 ### Form.useWatch
 
-`type Form.useWatch = (namePath: NamePath, formInstance?: FormInstance): Value`
+`type Form.useWatch = (namePath: NamePath, formInstance?: FormInstance | WatchOptions): Value`
 
-Added in `4.20.0`. Watch the value of a field. You can use this to interactive with other hooks like `useSWR` to reduce develop cost:
+Watch the value of a field. You can use this to interact with other hooks like `useSWR` to reduce development costs:
 
 ```tsx
 const Demo = () => {
@@ -375,6 +375,30 @@ const Demo = () => {
 };
 ```
 
+If your component is wrapped by `Form.Item`, you can omit the second argument, `Form.useWatch` will find the nearest `FormInstance` automatically.
+
+By default `useWatch` only watches the registered field. If you want to watch the unregistered field, please use `preserve`:
+
+```tsx
+const Demo = () => {
+  const [form] = Form.useForm();
+
+  const age = Form.useWatch('age', { form, preserve: true });
+  console.log(age);
+
+  return (
+    <div>
+      <Button onClick={() => form.setFieldValue('age', 2)}>Update</Button>
+      <Form form={form}>
+        <Form.Item name="name">
+          <Input />
+        </Form.Item>
+      </Form>
+    </div>
+  );
+};
+```
+
 ### Form.Item.useStatus
 
 `type Form.useFormItemStatus = (): { status: ValidateStatus | undefined }`
@@ -442,6 +466,13 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
 | warningOnly | Warning only. Not block form submit | boolean | 4.17.0 |
 | whitespace | Failed if only has whitespace, only work with `type: 'string'` rule | boolean |  |
 
+#### WatchOptions
+
+| Name | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| form | Form instance | FormInstance | Current form in context | 5.4.0 |
+| preserve | Whether to watch the field which has no matched `Form.Item` | boolean | false | 5.4.0 |
+
 ## FAQ
 
 ### Custom validator not working

components/form/index.zh-CN.md

@@ -353,9 +353,9 @@ export default () => {
 
 ### Form.useWatch
 
-`type Form.useWatch = (namePath: NamePath, formInstance?: FormInstance): Value`
+`type Form.useWatch = (namePath: NamePath, formInstance?: FormInstance | WatchOptions): Value`
 
-`4.20.0` 新增，用于直接获取 form 中字段对应的值。通过该 Hooks 可以与诸如 `useSWR` 进行联动从而降低维护成本：
+用于直接获取 form 中字段对应的值。通过该 Hooks 可以与诸如 `useSWR` 进行联动从而降低维护成本：
 
 ```tsx
 const Demo = () => {
@@ -374,6 +374,30 @@ const Demo = () => {
 };
 ```
 
+如果你的组件被包裹在 `Form.Item` 内部，你可以省略第二个参数，`Form.useWatch` 会自动找到上层最近的 `FormInstance`。
+
+`useWatch` 默认只监听在 Form 中注册的字段，如果需要监听非注册字段，可以通过配置 `preserve` 进行监听：
+
+```tsx
+const Demo = () => {
+  const [form] = Form.useForm();
+
+  const age = Form.useWatch('age', { form, preserve: true });
+  console.log(age);
+
+  return (
+    <div>
+      <Button onClick={() => form.setFieldValue('age', 2)}>Update</Button>
+      <Form form={form}>
+        <Form.Item name="name">
+          <Input />
+        </Form.Item>
+      </Form>
+    </div>
+  );
+};
+```
+
 ### Form.Item.useStatus
 
 `type Form.Item.useStatus = (): { status: ValidateStatus | undefined }`
@@ -441,6 +465,13 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
 | warningOnly | 仅警告，不阻塞表单提交 | boolean | 4.17.0 |
 | whitespace | 如果字段仅包含空格则校验不通过，只在 `type: 'string'` 时生效 | boolean |  |
 
+#### WatchOptions
+
+| 名称     | 说明                                  | 类型         | 默认值                 | 版本  |
+| -------- | ------------------------------------- | ------------ | ---------------------- | ----- |
+| form     | 指定 Form 实例                        | FormInstance | 当前 context 中的 Form | 5.4.0 |
+| preserve | 是否监视没有对应的 `Form.Item` 的字段 | boolean      | false                  | 5.4.0 |
+
 ## FAQ
 
 ### 自定义 validator 没有效果