Merge pull request #902 from WeBankFinTech/feat-form-clearValidate-fi…

…eldProps feat(Form): 支持清除和重置指定表单项
WeBankFinTech · Nov 1, 2024 · 9e551cd · 9e551cd
2 parents bb81f62 + c1615c7
commit 9e551cd
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 62 deletions.
diff --git a/components/form/form.vue b/components/form/form.vue
@@ -62,13 +62,16 @@ export default defineComponent({
                     'Form `model` is required for resetFields to work.',
                 );
             }
-            const specifyPropsFlag = Boolean(fieldProps.length); // 是否指定prop: 【部分】表单字段校验调用会指定; 【整个】表单校验调用则不会指定
+
+            // 是否指定prop: 【部分】表单字段校验调用会指定; 【整个】表单校验调用则不会指定
+            const specifyPropsFlag = Boolean(fieldProps.length);
             const promiseList: Promise<any>[] = []; // 原始校验结果
 
             Object.values(formFields).forEach((formField) => {
+                // Skip if Specify prop but not include
                 if (specifyPropsFlag && !fieldProps.includes(formField.prop)) {
                     return;
-                } // Skip if Specify prop but not include
+                }
 
                 const promise = formField.validateRules(trigger);
                 promiseList.push(
@@ -108,25 +111,43 @@ export default defineComponent({
             validateFields(fieldProps);
 
         /** 移除表单项的校验结果 */
-        const clearValidate = () => {
+        const clearValidate = (fieldProps: string[] = []) => {
             if (!props.model) {
                 return Promise.reject(
                     'Form `model` is required for resetFields to work.',
                 );
             }
+
+            // 是否指定prop: 【部分】表单字段校验调用会指定; 【整个】表单校验调用则不会指定
+            const specifyPropsFlag = Boolean(fieldProps.length);
+
             Object.values(formFields).forEach((formField) => {
+                // Skip if Specify prop but not include
+                if (specifyPropsFlag && !fieldProps.includes(formField.prop)) {
+                    return;
+                }
+
                 formField.clearValidate();
             });
         };
 
         /** 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 */
-        const resetFields = () => {
+        const resetFields = (fieldProps: string[] = []) => {
             if (!props.model) {
                 return Promise.reject(
                     'Form `model` is required for resetFields to work.',
                 );
             }
+
+            // 是否指定prop: 【部分】表单字段校验调用会指定; 【整个】表单校验调用则不会指定
+            const specifyPropsFlag = Boolean(fieldProps.length);
+
             Object.values(formFields).forEach((formField) => {
+                // Skip if Specify prop but not include
+                if (specifyPropsFlag && !fieldProps.includes(formField.prop)) {
+                    return;
+                }
+
                 formField.resetField();
             });
         };

diff --git a/docs/.vitepress/components/form/formItemValidator.vue b/docs/.vitepress/components/form/formItemValidator.vue
@@ -7,6 +7,12 @@
         :showMessage="true"
         :rules="rules"
     >
+        <FFormItem prop="name" label="姓名">
+            <FInput
+                v-model="modelForm.name"
+                placeholder="请输入姓名"
+            />
+        </FFormItem>
         <FFormItem
             label="备注 slot"
             labelClass="more-label-container"
@@ -31,77 +37,78 @@
                 <FButton type="primary" @click="submitHandler"> 提交 </FButton>
                 <FButton type="primary" @click="clearHandler"> 清除 </FButton>
                 <FButton type="primary" @click="resetHandler">重置</FButton>
+                <FButton type="primary" @click="clearNameHandler"> 清除姓名 </FButton>
+                <FButton type="primary" @click="resetNameHandler">重置姓名</FButton>
             </FSpace>
         </FFormItem>
     </FForm>
 </template>
 
-<script>
+<script setup>
 import { computed, reactive, ref } from 'vue';
 import { FMessage } from '@fesjs/fes-design';
 
-export default {
-    setup() {
-        const formRef = ref(null);
+const formRef = ref(null);
 
-        const modelForm = reactive({
-            desc: '',
-        });
+const modelForm = reactive({
+    name: '',
+    desc: '',
+});
 
-        const validateContFun = (rule, value) => {
-            console.log('[form.validate] [validateContFun] value:', value);
-            return Boolean(value.length >= 3 && value.length <= 8);
-        };
-        const rules = computed(() => {
-            return {
-                desc: [
-                    {
-                        required: true,
-                        message: '请输入备注',
-                        trigger: ['change'],
-                    },
-                    {
-                        validator: validateContFun,
-                        message: '长度在 3 到 8 个字符',
-                        trigger: ['change'],
-                    },
-                ],
-            };
-        });
+const validateContFun = (rule, value) => {
+    console.log('[form.validate] [validateContFun] value:', value);
+    return Boolean(value.length >= 3 && value.length <= 8);
+};
+const rules = computed(() => {
+    return {
+        name: [{
+            required: true,
+            message: '请输入姓名',
+            trigger: ['change'],
+        }],
+        desc: [
+            {
+                required: true,
+                message: '请输入备注',
+                trigger: ['change'],
+            },
+            {
+                validator: validateContFun,
+                message: '长度在 3 到 8 个字符',
+                trigger: ['change'],
+            },
+        ],
+    };
+});
 
-        const changeHandler = (value) => {
-            console.log('[form.validate] [changeHandler] value:', value);
-        };
+const changeHandler = (value) => {
+    console.log('[form.validate] [changeHandler] value:', value);
+};
 
-        const submitHandler = async () => {
-            try {
-                await formRef.value.validate();
-                console.log('[form.validate] [submitHandler] 表单验证成功~');
-            } catch (error) {
-                console.log(
-                    '[form.validate] [submitHandler] 表单验证失败, error:',
-                    error,
-                );
-                FMessage.warn('请检查表单项');
-            }
-        };
-        const clearHandler = () => {
-            formRef.value.clearValidate();
-        };
-        const resetHandler = () => {
-            formRef.value.resetFields();
-        };
+const submitHandler = async () => {
+    try {
+        await formRef.value.validate();
+        console.log('[form.validate] [submitHandler] 表单验证成功~');
+    } catch (error) {
+        console.log(
+            '[form.validate] [submitHandler] 表单验证失败, error:',
+            error,
+        );
+        FMessage.warn('请检查表单项');
+    }
+};
+const clearHandler = () => {
+    formRef.value.clearValidate();
+};
+const resetHandler = () => {
+    formRef.value.resetFields();
+};
 
-        return {
-            formRef,
-            rules,
-            modelForm,
-            changeHandler,
-            submitHandler,
-            clearHandler,
-            resetHandler,
-        };
-    },
+const clearNameHandler = () => {
+    formRef.value.clearValidate(['name']);
+};
+const resetNameHandler = () => {
+    formRef.value.resetFields(['name']);
 };
 </script>