feat(form): add useWatch

src/packages/form/demo.taro.tsx

@@ -9,6 +9,7 @@ import Demo4 from './demos/taro/demo4'
 import Demo5 from './demos/taro/demo5'
 import Demo6 from './demos/taro/demo6'
 import Demo7 from './demos/taro/demo7'
+import Demo8 from './demos/taro/demo8'
 
 const FormDemo = () => {
   const [translated] = useTranslate({
@@ -20,6 +21,7 @@ const FormDemo = () => {
       title4: 'Form.useForm 对表单数据域进行交互。',
       title5: '表单类型',
       validateTrigger: '校验触发时机',
+      useWatch: 'useWatch',
     },
     'en-US': {
       basic: 'Basic Usage',
@@ -29,6 +31,7 @@ const FormDemo = () => {
       title4: 'Interact with form data fields via Form.useForm',
       title5: 'Form Type',
       validateTrigger: 'Validate Trigger',
+      useWatch: 'useWatch',
     },
   })
 
@@ -50,6 +53,8 @@ const FormDemo = () => {
         <Demo6 />
         <h2>{translated.title5}</h2>
         <Demo7 />
+        <h2>{translated.useWatch}</h2>
+        <Demo8 />
       </div>
     </>
   )

src/packages/form/demo.tsx

@@ -7,6 +7,7 @@ import Demo4 from './demos/h5/demo4'
 import Demo5 from './demos/h5/demo5'
 import Demo6 from './demos/h5/demo6'
 import Demo7 from './demos/h5/demo7'
+import Demo8 from './demos/h5/demo8'
 
 const FormDemo = () => {
   const [translated] = useTranslate({
@@ -18,6 +19,7 @@ const FormDemo = () => {
       title4: 'Form.useForm 对表单数据域进行交互。',
       title5: '表单类型',
       validateTrigger: '校验触发时机',
+      useWatch: 'useWatch',
     },
     'en-US': {
       basic: 'Basic Usage',
@@ -27,6 +29,7 @@ const FormDemo = () => {
       title4: 'Interact with form data fields via Form.useForm',
       title5: 'Form Type',
       validateTrigger: 'Validate Trigger',
+      useWatch: 'useWatch',
     },
   })
 
@@ -47,6 +50,8 @@ const FormDemo = () => {
         <Demo6 />
         <h2>{translated.title5}</h2>
         <Demo7 />
+        <h2>{translated.useWatch}</h2>
+        <Demo8 />
       </div>
     </>
   )

src/packages/form/demos/h5/demo8.tsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import { Button, Form, Input, Radio, Space } from '@nutui/nutui-react'
+
+type FieldType = { account?: string; loginMethod?: 'mobile' | 'email' }
+
+const Demo8 = () => {
+  const [form] = Form.useForm<FieldType>()
+  const account = Form.useWatch('account', form)
+  const loginMethod = Form.useWatch('loginMethod', form)
+
+  return (
+    <Form
+      form={form}
+      initialValues={{ loginMethod: 'mobile', account: '123' }}
+      footer={
+        <>
+          <div
+            style={{
+              width: '100%',
+            }}
+          >
+            <div
+              style={{
+                fontSize: '12px',
+                textAlign: 'center',
+                marginBottom: '20px',
+              }}
+            >
+              你将使用 {loginMethod === 'mobile' ? '手机号' : '邮箱'} {account}{' '}
+              登录
+            </div>
+            <Button block type="primary" size="large" nativeType="submit">
+              提交
+            </Button>
+          </div>
+        </>
+      }
+    >
+      <Form.Item name="loginMethod" label="登录方式">
+        <Radio.Group>
+          <Space>
+            <Radio value="mobile">手机号</Radio>
+            <Radio value="email">邮箱</Radio>
+          </Space>
+        </Radio.Group>
+      </Form.Item>
+
+      <>
+        {loginMethod === 'mobile' && (
+          <Form.Item name="account" label="手机号">
+            <Input placeholder="请输入手机号" />
+          </Form.Item>
+        )}
+        {loginMethod === 'email' && (
+          <Form.Item name="account" label="邮箱">
+            <Input placeholder="请输入邮箱" />
+          </Form.Item>
+        )}
+      </>
+    </Form>
+  )
+}
+
+export default Demo8

src/packages/form/demos/taro/demo8.tsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import { Button, Form, Input, Radio, Space } from '@nutui/nutui-react-taro'
+
+type FieldType = { account?: string; loginMethod?: 'mobile' | 'email' }
+
+const Demo8 = () => {
+  const [form] = Form.useForm<FieldType>()
+  const account = Form.useWatch('account', form)
+  const loginMethod = Form.useWatch('loginMethod', form)
+
+  return (
+    <Form
+      form={form}
+      initialValues={{ loginMethod: 'mobile', account: '123' }}
+      footer={
+        <>
+          <div
+            style={{
+              width: '100%',
+            }}
+          >
+            <div
+              style={{
+                fontSize: '12px',
+                textAlign: 'center',
+                marginBottom: '20px',
+              }}
+            >
+              你将使用 {loginMethod === 'mobile' ? '手机号' : '邮箱'} {account}{' '}
+              登录
+            </div>
+            <Button block type="primary" size="large" nativeType="submit">
+              提交
+            </Button>
+          </div>
+        </>
+      }
+    >
+      <Form.Item name="loginMethod" label="登录方式">
+        <Radio.Group>
+          <Space>
+            <Radio value="mobile">手机号</Radio>
+            <Radio value="email">邮箱</Radio>
+          </Space>
+        </Radio.Group>
+      </Form.Item>
+
+      <>
+        {loginMethod === 'mobile' && (
+          <Form.Item name="account" label="手机号">
+            <Input placeholder="请输入手机号" />
+          </Form.Item>
+        )}
+        {loginMethod === 'email' && (
+          <Form.Item name="account" label="邮箱">
+            <Input placeholder="请输入邮箱" />
+          </Form.Item>
+        )}
+      </>
+    </Form>
+  )
+}
+
+export default Demo8

src/packages/form/doc.en-US.md

@@ -58,6 +58,14 @@ import { Form } from '@nutui/nutui-react'
 
 :::
 
+### useWatch
+
+:::demo
+
+<CodeBlock src='h5/demo8.tsx'></CodeBlock>
+
+:::
+
 ### Form Type
 
 :::demo
@@ -121,7 +129,7 @@ The rule validation process is based on [async-validator](https://github.com/yim
 
 ### FormInstance
 
-Form.useForm() creates a Form instance, which is used to manage all data states.
+`Form.useForm()` creates a Form instance, which is used to manage all data states.
 
 | Property | Description | Type |
 | --- | --- | --- |
@@ -132,6 +140,8 @@ Form.useForm() creates a Form instance, which is used to manage all data states.
 | resetFields | Reset form prompt state | `() => void` |
 | submit | method to submit a form for validation | `Promise` |
 
+`Form.useWath()`, this method will watch specified inputs and return their values. It is useful to render input value and for determining what to render by condition.
+
 ## Theming
 
 ### CSS Variables

src/packages/form/doc.md

@@ -58,6 +58,14 @@ import { Form } from '@nutui/nutui-react'
 
 :::
 
+### useWatch
+
+:::demo
+
+<CodeBlock src='h5/demo8.tsx'></CodeBlock>
+
+:::
+
 ### 表单类型
 
 :::demo
@@ -120,7 +128,7 @@ import { Form } from '@nutui/nutui-react'
 
 ### FormInstance
 
-Form.useForm()创建 Form 实例，用于管理所有数据状态。
+`Form.useForm()`创建 Form 实例，用于管理所有数据状态。
 
 | 属性 | 说明 | 类型 |
 | --- | --- | --- |
@@ -131,6 +139,8 @@ Form.useForm()创建 Form 实例，用于管理所有数据状态。
 | resetFields | 重置表单提示状态 | `() => void` |
 | submit | 提交表单进行校验的方法 | `Promise` |
 
+`Form.useWatch()`此方法将监视指定的输入并返回其值。它对于呈现输入值和确定根据条件呈现的内容很有用。
+
 ## 主题定制
 
 ### 样式变量

src/packages/form/doc.taro.md

@@ -58,6 +58,14 @@ import { Form } from '@nutui/nutui-react-taro'
 
 :::
 
+### useWatch
+
+:::demo
+
+<CodeBlock src='taro/demo8.tsx'></CodeBlock>
+
+:::
+
 ### 表单类型
 
 :::demo
@@ -120,7 +128,7 @@ import { Form } from '@nutui/nutui-react-taro'
 
 ### FormInstance
 
-Form.useForm()创建 Form 实例，用于管理所有数据状态。
+`Form.useForm()`创建 Form 实例，用于管理所有数据状态。
 
 | 属性 | 说明 | 类型 |
 | --- | --- | --- |
@@ -131,6 +139,8 @@ Form.useForm()创建 Form 实例，用于管理所有数据状态。
 | resetFields | 重置表单提示状态 | `() => void` |
 | submit | 提交表单进行校验的方法 | `Promise` |
 
+`Form.useWatch()`此方法将监视指定的输入并返回其值。它对于呈现输入值和确定根据条件呈现的内容很有用。
+
 ## 主题定制
 
 ### 样式变量

src/packages/form/doc.zh-TW.md

@@ -58,6 +58,14 @@ import { Form } from '@nutui/nutui-react'
 
 :::
 
+### useWatch
+
+:::demo
+
+<CodeBlock src='h5/demo8.tsx'></CodeBlock>
+
+:::
+
 ### 表單類型
 
 :::demo
@@ -120,7 +128,7 @@ import { Form } from '@nutui/nutui-react'
 
 ### FormInstance
 
-Form.useForm()創建 Form 實例，用於管理所有數據狀態。
+`Form.useForm()`創建 Form 實例，用於管理所有數據狀態。
 
 | 屬性 | 說明 | 類型 |
 | --- | --- | --- |
@@ -131,6 +139,8 @@ Form.useForm()創建 Form 實例，用於管理所有數據狀態。
 | resetFields | 重置錶單提示狀態 | `() => void` |
 | submit | 提交錶單進行校驗的方法 | `Promise` |
 
+`Form.useWatch()`此方法將監視指定的輸入並傳回其值。它對於呈現輸入值和確定根據條件呈現的內容很有用。
+
 ## 主題定制
 
 ### 樣式變量

src/packages/form/index.taro.ts

@@ -2,7 +2,7 @@ import React from 'react'
 import { Form, FormProps } from './form.taro'
 import { FormItem } from '../formitem/formitem.taro'
 import { FormInstance } from './types'
-import { useForm } from '@/packages/form/useform.taro'
+import { useForm, useWatch } from '@/packages/form/useform.taro'
 
 export type {
   FormItemRuleWithoutValidator,
@@ -17,11 +17,13 @@ type CompoundedComponent = React.ForwardRefExoticComponent<
 > & {
   Item: typeof FormItem
   useForm: typeof useForm
+  useWatch: typeof useWatch
 }
 
 const InnerForm = Form as CompoundedComponent
 
 InnerForm.Item = FormItem
 InnerForm.useForm = useForm
+InnerForm.useWatch = useWatch
 
 export default InnerForm

src/packages/form/index.ts

@@ -2,7 +2,7 @@ import React from 'react'
 import { Form, FormProps } from './form'
 import { FormItem } from '../formitem/formitem'
 import { FormInstance } from './types'
-import { useForm } from '@/packages/form/useform'
+import { useForm, useWatch } from '@/packages/form/useform'
 
 export type {
   FormItemRuleWithoutValidator,
@@ -17,11 +17,13 @@ type CompoundedComponent = React.ForwardRefExoticComponent<
 > & {
   Item: typeof FormItem
   useForm: typeof useForm
+  useWatch: typeof useWatch
 }
 
 const InnerForm = Form as CompoundedComponent
 
 InnerForm.Item = FormItem
 InnerForm.useForm = useForm
+InnerForm.useWatch = useWatch
 
 export default InnerForm