feat(form): resetFields 增加 namepath 参数，用于重置指定的字段

jdf2e · Jan 20, 2025 · c547da8 · c547da8
1 parent 16fb6e5
commit c547da8
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 16 deletions.
diff --git a/src/packages/form/__tests__/form.spec.tsx b/src/packages/form/__tests__/form.spec.tsx
@@ -312,3 +312,56 @@ 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()
+    })
+  }
+})
diff --git a/src/packages/form/useform.taro.ts b/src/packages/form/useform.taro.ts
@@ -174,7 +174,7 @@ class FormStore {
 
   validateFields = async (nameList?: NamePath[]) => {
     let filterEntities = []
-    this.errors.length = 0
+    // this.errors.length = 0
     if (!nameList || nameList.length === 0) {
       filterEntities = this.fieldEntities
     } else {
@@ -200,13 +200,29 @@ class FormStore {
     }
   }
 
-  resetFields = () => {
-    this.errors.length = 0
-    const nextStore = merge({}, this.initialValues)
-    this.updateStore(nextStore)
-    this.fieldEntities.forEach((entity: FormFieldEntity) => {
-      entity.onStoreChange('reset')
-    })
+  resetFields = (namePaths?: NamePath[]) => {
+    if (namePaths) {
+      namePaths.forEach((path) => {
+        this.errors[path] = null
+        this.fieldEntities.forEach((entity: FormFieldEntity) => {
+          const name = entity.props.name
+          if (name === path) {
+            if (path in this.initialValues) {
+              this.updateStore({ [path]: this.initialValues[path] })
+            } else {
+              delete this.store[path]
+            }
+            entity.onStoreChange('reset')
+          }
+        })
+      })
+    } else {
+      const nextStore = merge({}, this.initialValues)
+      this.updateStore(nextStore)
+      this.fieldEntities.forEach((entity: FormFieldEntity) => {
+        entity.onStoreChange('reset')
+      })
+    }
   }
 
   // 监听事件

diff --git a/src/packages/form/useform.ts b/src/packages/form/useform.ts
@@ -174,7 +174,7 @@ class FormStore {
 
   validateFields = async (nameList?: NamePath[]) => {
     let filterEntities = []
-    this.errors.length = 0
+    // this.errors.length = 0
     if (!nameList || nameList.length === 0) {
       filterEntities = this.fieldEntities
     } else {
@@ -200,13 +200,29 @@ class FormStore {
     }
   }
 
-  resetFields = () => {
-    this.errors.length = 0
-    const nextStore = merge({}, this.initialValues)
-    this.updateStore(nextStore)
-    this.fieldEntities.forEach((entity: FormFieldEntity) => {
-      entity.onStoreChange('reset')
-    })
+  resetFields = (namePaths?: NamePath[]) => {
+    if (namePaths) {
+      namePaths.forEach((path) => {
+        this.errors[path] = null
+        this.fieldEntities.forEach((entity: FormFieldEntity) => {
+          const name = entity.props.name
+          if (name === path) {
+            if (path in this.initialValues) {
+              this.updateStore({ [path]: this.initialValues[path] })
+            } else {
+              delete this.store[path]
+            }
+            entity.onStoreChange('reset')
+          }
+        })
+      })
+    } else {
+      const nextStore = merge({}, this.initialValues)
+      this.updateStore(nextStore)
+      this.fieldEntities.forEach((entity: FormFieldEntity) => {
+        entity.onStoreChange('reset')
+      })
+    }
   }
 
   // 监听事件