diff --git a/src/packages/form/__tests__/form.spec.tsx b/src/packages/form/__tests__/form.spec.tsx
index d5d3950501..b283195df0 100644
--- a/src/packages/form/__tests__/form.spec.tsx
+++ b/src/packages/form/__tests__/form.spec.tsx
@@ -314,6 +314,59 @@ test('no-style and render function', async () => {
})
})
+test('reset usename filed', async () => {
+ const Demo1 = () => {
+ const [form] = Form.useForm()
+ return (
+ <>
+
+
+
+
+ >
+ )
+ }
+ 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()
+ })
+ }
+})
+
test('useWatch', async () => {
const Demo = () => {
const [form] = Form.useForm()
diff --git a/src/packages/form/doc.en-US.md b/src/packages/form/doc.en-US.md
index fa01e2fac5..36cb759393 100644
--- a/src/packages/form/doc.en-US.md
+++ b/src/packages/form/doc.en-US.md
@@ -137,7 +137,7 @@ The rule validation process is based on [async-validator](https://github.com/yim
| 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` |
`Form.useWatch()`, 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.
diff --git a/src/packages/form/doc.md b/src/packages/form/doc.md
index d9619d0048..b4b4d90b09 100644
--- a/src/packages/form/doc.md
+++ b/src/packages/form/doc.md
@@ -136,7 +136,7 @@ import { Form } from '@nutui/nutui-react'
| 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` |
`Form.useWatch()`此方法将监视指定的输入并返回其值。它对于呈现输入值和确定根据条件呈现的内容很有用。
diff --git a/src/packages/form/doc.taro.md b/src/packages/form/doc.taro.md
index 748db03665..a2b8e62131 100644
--- a/src/packages/form/doc.taro.md
+++ b/src/packages/form/doc.taro.md
@@ -136,7 +136,7 @@ import { Form } from '@nutui/nutui-react-taro'
| 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` |
`Form.useWatch()`此方法将监视指定的输入并返回其值。它对于呈现输入值和确定根据条件呈现的内容很有用。
diff --git a/src/packages/form/doc.zh-TW.md b/src/packages/form/doc.zh-TW.md
index 8725a0a372..33e4cd61b8 100644
--- a/src/packages/form/doc.zh-TW.md
+++ b/src/packages/form/doc.zh-TW.md
@@ -136,7 +136,7 @@ import { Form } from '@nutui/nutui-react'
| 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` |
`Form.useWatch()`此方法將監視指定的輸入並傳回其值。它對於呈現輸入值和確定根據條件呈現的內容很有用。
diff --git a/src/packages/form/useform.taro.ts b/src/packages/form/useform.taro.ts
index 4ca2f92679..8755f9261f 100644
--- a/src/packages/form/useform.taro.ts
+++ b/src/packages/form/useform.taro.ts
@@ -176,7 +176,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 {
@@ -202,13 +202,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.length) {
+ 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 4ca2f92679..8755f9261f 100644
--- a/src/packages/form/useform.ts
+++ b/src/packages/form/useform.ts
@@ -176,7 +176,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 {
@@ -202,13 +202,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.length) {
+ 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')
+ })
+ }
}
// 监听事件