浏览代码

fix(form): 动态表单重置状态bug #932

richard1015 3 年之前
父节点
当前提交
58f2099d1f

+ 4 - 4
src/packages/__VUE/form/common.ts

@@ -16,20 +16,20 @@ export const component = {
   setup(props: any, { emit, slots }: any) {
     const formErrorTip = computed(() => reactive<any>({}));
     provide('formErrorTip', formErrorTip);
-    const init = (value = props.modelValue) => {
-      Object.keys(value).forEach((item) => {
+    const clearErrorTips = (value = props.modelValue) => {
+      Object.keys(formErrorTip.value).forEach((item) => {
         formErrorTip.value[item] = '';
       });
     };
 
     const reset = () => {
-      init();
+      clearErrorTips();
     };
 
     watch(
       () => props.modelValue,
       (value: any) => {
-        init(value);
+        clearErrorTips(value);
       },
       { immediate: true }
     );

+ 7 - 1
src/packages/__VUE/form/demo.vue

@@ -36,7 +36,10 @@
       <nut-cell>
         <nut-button size="small" style="margin-right: 10px" @click="dynamicForm.methods.add">添加</nut-button>
         <nut-button size="small" style="margin-right: 10px" @click="dynamicForm.methods.remove">删除</nut-button>
-        <nut-button type="primary" size="small" @click="dynamicForm.methods.submit">提交</nut-button>
+        <nut-button type="primary" style="margin-right: 10px" size="small" @click="dynamicForm.methods.submit"
+          >提交
+        </nut-button>
+        <nut-button size="small" @click="dynamicForm.methods.reset">重置提示状态</nut-button>
       </nut-cell>
     </nut-form>
     <h2>表单校验</h2>
@@ -178,6 +181,9 @@ export default createDemo({
             }
           });
         },
+        reset() {
+          dynamicRefForm.value.reset();
+        },
         remove() {
           dynamicForm.state.tels.splice(dynamicForm.state.tels.length - 1, 1);
         },

+ 5 - 1
src/packages/__VUE/form/doc.md

@@ -68,7 +68,8 @@ app.use(CellGroup);
     <nut-cell>
       <nut-button size="small" style="margin-right: 10px" @click="dynamicForm.methods.add">添加</nut-button>
       <nut-button size="small" style="margin-right: 10px" @click="dynamicForm.methods.remove">删除</nut-button>
-      <nut-button type="primary" size="small" @click="dynamicForm.methods.submit">提交</nut-button>
+      <nut-button type="primary" style="margin-right: 10px" size="small" @click="dynamicForm.methods.submit">提交</nut-button>
+      <nut-button size="small" @click="dynamicForm.methods.reset">重置提示状态</nut-button>
     </nut-cell>
   </nut-form>
 </template>
@@ -96,6 +97,9 @@ export default {
             }
           });
         },
+        reset() {
+          dynamicRefForm.value.reset();
+        },
         remove() {
           dynamicForm.state.tels.splice(dynamicForm.state.tels.length - 1, 1);
         },

+ 7 - 1
src/sites/mobile-taro/vue/src/dentry/pages/form/index.vue

@@ -36,7 +36,10 @@
       <nut-cell>
         <nut-button size="small" style="margin-right: 10px" @click="dynamicForm.methods.add">添加</nut-button>
         <nut-button size="small" style="margin-right: 10px" @click="dynamicForm.methods.remove">删除</nut-button>
-        <nut-button type="primary" size="small" @click="dynamicForm.methods.submit">提交</nut-button>
+        <nut-button type="primary" style="margin-right: 10px" size="small" @click="dynamicForm.methods.submit"
+          >提交
+        </nut-button>
+        <nut-button size="small" @click="dynamicForm.methods.reset">重置提示状态</nut-button>
       </nut-cell>
     </nut-form>
     <h2>表单校验</h2>
@@ -175,6 +178,9 @@ export default {
             }
           });
         },
+        reset() {
+          dynamicRefForm.value.reset();
+        },
         remove() {
           dynamicForm.state.tels.splice(dynamicForm.state.tels.length - 1, 1);
         },