feat(form): 同步 2.x 的功能 (#2976)

* feat(form): add usewatch

* refactor: tags

Author: oasis-cloud

src/packages/form/__tests__/form.spec.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react'
-import { render, fireEvent, waitFor } from '@testing-library/react'
-import '@testing-library/jest-dom'
 import { useEffect } from 'react'
+import { fireEvent, render, waitFor } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { Button, Radio, Space } from '@nutui/nutui-react'
 import Form, { FormInstance } from '@/packages/form'
 import Input from '@/packages/input'
 
@@ -167,7 +168,9 @@ test('form set required', () => {
       </Form.Item>
     </Form>
   )
-  expect(container.querySelectorAll('.required')).toHaveLength(1)
+  expect(
+    container.querySelectorAll('.nut-form-item-label-required')
+  ).toHaveLength(1)
 })
 
 test('form set change value', async () => {
@@ -310,3 +313,126 @@ test('no-style and render function', async () => {
     expect(relatedInput).toBeTruthy()
   })
 })
+
+test('reset usename filed', async () => {
+  const Demo1 = () => {
+    const [form] = Form.useForm()
+    return (
+      <>
+        <Form
+          form={form}
+          labelPosition="right"
+          footer={
+            <>
+              <div
+                id="reset"
+                onClick={() => {
+                  form.resetFields(['username'])
+                }}
+              >
+                Reset
+              </div>
+            </>
+          }
+        >
+          <Form.Item
+            align="center"
+            required
+            label="字段A"
+            name="username"
+            rules={[{ max: 5, message: '字段A不能超过5个字' }]}
+          >
+            <Input placeholder="请输入字段A" type="text" />
+          </Form.Item>
+        </Form>
+      </>
+    )
+  }
+  const { container } = render(<Demo1 />)
+  const input = container.querySelector('input')
+  const reset = container.querySelector('#reset')
+  if (input) {
+    fireEvent.change(input, { target: { value: 'NutUI React Taro' } })
+    await waitFor(() => {
+      expect(
+        container.querySelector('.nut-form-item-body-tips')
+      ).toHaveTextContent('字段A不能超过5个字')
+    })
+  }
+  if (reset) {
+    fireEvent.click(reset)
+    await waitFor(() => {
+      expect(container.querySelector('.nut-form-item-body-tips')).toBeNull()
+    })
+  }
+})
+
+test('useWatch', async () => {
+  const Demo = () => {
+    const [form] = Form.useForm()
+    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
+                className="result"
+                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 className="clickTest" 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>
+    )
+  }
+
+  const { container } = render(<Demo />)
+  const clickTest = container.querySelector('.clickTest')
+  if (clickTest) {
+    fireEvent.click(clickTest)
+    const result = container.querySelector('.result')
+    expect(result).toHaveTextContent('你将使用 邮箱 123 登录')
+  }
+})