diff --git a/docs/component/form.md b/docs/component/form.md index d93efc8c1..f2616d1a7 100644 --- a/docs/component/form.md +++ b/docs/component/form.md @@ -942,6 +942,7 @@ function handleIconClick() { | -------- | ------------------------------------------------------------------------------ | --------------- | -------- | | validate | 验证表单,支持传入一个 prop 来验证单个表单项,不传入 prop 时,会验证所有表单项 | `prop?: string` | 0.2.0 | | reset | 重置校验结果 | - | 0.2.0 | +| resetFields | 重置表单项为初始值,并移除校验结果 | - | $LOWEST_VERSION$ | ## 外部样式类 diff --git a/src/pages/form/Index.vue b/src/pages/form/Index.vue index fa18a6344..b34c60ce5 100644 --- a/src/pages/form/Index.vue +++ b/src/pages/form/Index.vue @@ -25,6 +25,7 @@ 提交 + 重置 @@ -194,6 +195,10 @@ function handleSubmit2() { }) } +function resetFields1() { + form1.value!.resetFields() +} + function handleClick1() { uni.navigateTo({ url: '/pages/form/demo1' }) } @@ -218,5 +223,8 @@ function handleClick4() { } .footer { padding: 16px; + .reset { + margin-top: 10px; + } } diff --git a/src/uni_modules/wot-design-uni/components/wd-form/types.ts b/src/uni_modules/wot-design-uni/components/wd-form/types.ts index 176b14620..c634d862c 100644 --- a/src/uni_modules/wot-design-uni/components/wd-form/types.ts +++ b/src/uni_modules/wot-design-uni/components/wd-form/types.ts @@ -80,6 +80,10 @@ export type FormExpose = { * 重置表单项的验证提示 */ reset: () => void + /** + * 重置表单项为初始值,并清空验证提示 + */ + resetFields: () => void } export type FormInstance = ComponentPublicInstance diff --git a/src/uni_modules/wot-design-uni/components/wd-form/wd-form.vue b/src/uni_modules/wot-design-uni/components/wd-form/wd-form.vue index 3c509d13b..36c0c8f79 100644 --- a/src/uni_modules/wot-design-uni/components/wd-form/wd-form.vue +++ b/src/uni_modules/wot-design-uni/components/wd-form/wd-form.vue @@ -23,6 +23,7 @@ import { deepClone, getPropByPath, isDef, isPromise } from '../common/util' import { useChildren } from '../composables/useChildren' import { useToast } from '../wd-toast' import { type FormRules, FORM_KEY, type ErrorMessage, formProps, type FormExpose } from './types' +import { onMounted } from 'vue' const { show: showToast } = useToast('wd-form-toast') const props = defineProps(formProps) @@ -180,7 +181,25 @@ function reset() { clearMessage() } -defineExpose({ validate, reset }) +/** + * 重置表单项为初始值,并清空验证提示 + */ +let initialValue: any = undefined +function resetFields() { + let model = props.model + children.forEach((field) => { + model[field.prop] = deepClone(initialValue[field.prop]) + }) + + reset() +} + +onMounted(() => { + // 保存初始值 + initialValue = deepClone(props.model) +}) + +defineExpose({ validate, reset, resetFields })