From c547da843b9ab7c2edd1bd629f89516140475866 Mon Sep 17 00:00:00 2001 From: oasis-cloud Date: Mon, 20 Jan 2025 16:11:13 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat(form):=20resetFields=20=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0=20namepath=20=E5=8F=82=E6=95=B0=EF=BC=8C=E7=94=A8?= =?UTF-8?q?=E4=BA=8E=E9=87=8D=E7=BD=AE=E6=8C=87=E5=AE=9A=E7=9A=84=E5=AD=97?= =?UTF-8?q?=E6=AE=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/form/__tests__/form.spec.tsx | 53 +++++++++++++++++++++++ src/packages/form/useform.taro.ts | 32 ++++++++++---- src/packages/form/useform.ts | 32 ++++++++++---- 3 files changed, 101 insertions(+), 16 deletions(-) diff --git a/src/packages/form/__tests__/form.spec.tsx b/src/packages/form/__tests__/form.spec.tsx index 8a07b93e01..68e882d928 100644 --- 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.resetFields(['username']) + }} + > + Reset +
+ + } + > + + + +
+ + ) + } + const { container } = render() + 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 index 8559e5c5d7..dcb1e9fe22 100644 --- 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 index 8559e5c5d7..dcb1e9fe22 100644 --- 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') + }) + } } // 监听事件 From dc3871dfffec03135fba6260fb4631215da7e608 Mon Sep 17 00:00:00 2001 From: oasis-cloud Date: Wed, 22 Jan 2025 18:28:11 +0800 Subject: [PATCH 2/3] fix: reviews --- src/packages/form/useform.taro.ts | 2 +- src/packages/form/useform.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/packages/form/useform.taro.ts b/src/packages/form/useform.taro.ts index dcb1e9fe22..0df8a5774c 100644 --- a/src/packages/form/useform.taro.ts +++ b/src/packages/form/useform.taro.ts @@ -201,7 +201,7 @@ class FormStore { } resetFields = (namePaths?: NamePath[]) => { - if (namePaths) { + if (namePaths && namePaths.length) { namePaths.forEach((path) => { this.errors[path] = null this.fieldEntities.forEach((entity: FormFieldEntity) => { diff --git a/src/packages/form/useform.ts b/src/packages/form/useform.ts index dcb1e9fe22..0df8a5774c 100644 --- a/src/packages/form/useform.ts +++ b/src/packages/form/useform.ts @@ -201,7 +201,7 @@ class FormStore { } resetFields = (namePaths?: NamePath[]) => { - if (namePaths) { + if (namePaths && namePaths.length) { namePaths.forEach((path) => { this.errors[path] = null this.fieldEntities.forEach((entity: FormFieldEntity) => { From d557f34e205a8b5bd5cf68cd427d7c9d64f5a769 Mon Sep 17 00:00:00 2001 From: oasis-cloud Date: Wed, 22 Jan 2025 18:29:58 +0800 Subject: [PATCH 3/3] fix: reviews --- src/packages/form/doc.en-US.md | 2 +- src/packages/form/doc.md | 2 +- src/packages/form/doc.taro.md | 2 +- src/packages/form/doc.zh-TW.md | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/packages/form/doc.en-US.md b/src/packages/form/doc.en-US.md index ed414f760b..8de0543021 100644 --- a/src/packages/form/doc.en-US.md +++ b/src/packages/form/doc.en-US.md @@ -129,7 +129,7 @@ Form.useForm() creates a Form instance, which is used to manage all data states. | getFieldsValue | Get values by a set of field names. Return according to the corresponding structure. Default return mounted field value, but you can use getFieldsValue(true) to get all values | `(name: NamePath \| boolean) => any` | | setFieldsValue | Set the value of the form (the value will be passed directly to the form store. If you do not want the object passed in to be modified, please copy it and pass it in) | `(values) => void` | | setFieldValue | Set the value of the corresponding field name | `(name: NamePath, value: T) => void` | -| resetFields | Reset form prompt state | `() => void` | +| resetFields | Reset form prompt state | `(namePaths?: NamePath[]) => void` | | submit | method to submit a form for validation | `Promise` | ## Theming diff --git a/src/packages/form/doc.md b/src/packages/form/doc.md index 2b176efff3..7d32786f04 100644 --- a/src/packages/form/doc.md +++ b/src/packages/form/doc.md @@ -128,7 +128,7 @@ Form.useForm()创建 Form 实例，用于管理所有数据状态。 | getFieldsValue | 获取一组字段名对应的值，会按照对应结构返回。默认返回现存字段值，当调用 getFieldsValue(true) 时返回所有值 | `(name: NamePath \| boolean) => any` | | setFieldsValue | 设置表单的值（该值将直接传入 form store 中。如果你不希望传入对象被修改，请克隆后传入） | `(values) => void` | | setFieldValue | 设置对应字段名的值 | `(name: NamePath, value: T) => void` | -| resetFields | 重置表单提示状态 | `() => void` | +| resetFields | 重置表单提示状态 | `(namePaths?: NamePath[]) => void` | | submit | 提交表单进行校验的方法 | `Promise` | ## 主题定制 diff --git a/src/packages/form/doc.taro.md b/src/packages/form/doc.taro.md index a6b01d1b5b..adebba3a4c 100644 --- a/src/packages/form/doc.taro.md +++ b/src/packages/form/doc.taro.md @@ -128,7 +128,7 @@ Form.useForm()创建 Form 实例，用于管理所有数据状态。 | getFieldsValue | 获取一组字段名对应的值，会按照对应结构返回。默认返回现存字段值，当调用 getFieldsValue(true) 时返回所有值 | `(name: NamePath \| boolean) => any` | | setFieldsValue | 设置表单的值（该值将直接传入 form store 中。如果你不希望传入对象被修改，请克隆后传入） | `(values) => void` | | setFieldValue | 设置对应字段名的值 | `(name: NamePath, value: T) => void` | -| resetFields | 重置表单提示状态 | `() => void` | +| resetFields | 重置表单提示状态 | `(namePaths?: NamePath[]) => void` | | submit | 提交表单进行校验的方法 | `Promise` | ## 主题定制 diff --git a/src/packages/form/doc.zh-TW.md b/src/packages/form/doc.zh-TW.md index 8abf1361c3..90e1d62001 100644 --- a/src/packages/form/doc.zh-TW.md +++ b/src/packages/form/doc.zh-TW.md @@ -128,7 +128,7 @@ Form.useForm()創建 Form 實例，用於管理所有數據狀態。 | getFieldsValue | 获取一组字段名对应的值，会按照对应结构返回。默认返回现存字段值，当调用 getFieldsValue(true) 时返回所有值 | `(name: NamePath \| boolean) => any` | | setFieldsValue | 設定表單的值（該值將直接傳入 form store 中。如果你不希望傳入物件被修改，請複製後傳入） | `(values) => void` | | setFieldValue | 設定對應欄位名的值 | `(name: NamePath, value: T) => void` | -| resetFields | 重置錶單提示狀態 | `() => void` | +| resetFields | 重置錶單提示狀態 | `(namePaths?: NamePath[]) => void` | | submit | 提交錶單進行校驗的方法 | `Promise` | ## 主題定制