fix(#4075): mark whole form dirty is validate called

epicmaxco · Dec 8, 2023 · 36f668a · 36f668a
1 parent b64cecb
commit 36f668a
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 5 deletions.
diff --git a/packages/ui/src/components/va-form/VaForm.stories.ts b/packages/ui/src/components/va-form/VaForm.stories.ts
@@ -240,7 +240,7 @@ export const ValidateAndResetValidation: StoryFn = () => ({
   components: { VaForm, VaInput, VaButton },
   template: `
     <va-form ref="form">
-      <va-input data-testid="input" :rules="[false]"/>
+      <va-input data-testid="input" :rules="[false]" stateful />
     </va-form>
     <va-button @click="$refs.form.validate()">
       Validate

diff --git a/packages/ui/src/composables/useForm/useFormChild.ts b/packages/ui/src/composables/useForm/useFormChild.ts
@@ -8,6 +8,7 @@ export const useFormChild = (context: FormFiled) => {
 
   if (!formContext) {
     return {
+      isFormDirty: ref(false),
       isFormImmediate: ref(false),
       doShowError: ref(true),
       doShowErrorMessages: ref(true),
@@ -26,6 +27,7 @@ export const useFormChild = (context: FormFiled) => {
   })
 
   return {
+    isFormDirty: formContext.isFormDirty,
     isFormImmediate: formContext.immediate,
     doShowError: formContext.doShowError,
     doShowErrorMessages: formContext.doShowErrorMessages,

diff --git a/packages/ui/src/composables/useForm/useFormParent.ts b/packages/ui/src/composables/useForm/useFormParent.ts
@@ -20,6 +20,7 @@ export const createFormContext = <Names extends string>(options: FormParentOptio
     doShowError: computed(() => !options.hideErrors),
     doShowErrorMessages: computed(() => !options.hideErrorMessages),
     doShowLoading: computed(() => !options.hideLoading),
+    isFormDirty: ref(false),
     registerField: (uid: number, field: FormFiled) => {
       fields.value.set(uid, field as FormFiled<Names>)
     },
@@ -34,7 +35,7 @@ export const useFormParent = <Names extends string = string>(options: FormParent
 
   provide(FormServiceKey, formContext)
 
-  const { fields } = formContext
+  const { fields, isFormDirty } = formContext
 
   const fieldNames = computed(() => fields.value.map((field) => unref(field.name)).filter(Boolean) as Names[])
   const fieldsNamed = computed(() => fields.value.reduce((acc, field) => {
@@ -47,31 +48,38 @@ export const useFormParent = <Names extends string = string>(options: FormParent
   }, {} as Record<Names, FormFiled['value']>))
   const isValid = computed(() => fields.value.every((field) => unref(field.isValid)))
   const isLoading = computed(() => fields.value.some((field) => unref(field.isLoading)))
-  const isDirty = computed(() => fields.value.some((field) => unref(field.isLoading)))
+  const isDirty = computed({
+    get () { return fields.value.some((field) => unref(field.isLoading)) || isFormDirty.value },
+    set (v) { isFormDirty.value = v },
+  })
   const errorMessages = computed(() => fields.value.map((field) => unref(field.errorMessages)).flat())
   const errorMessagesNamed = computed(() => fields.value.reduce((acc, field) => {
     if (unref(field.name)) { acc[unref(field.name) as Names] = unref(field.errorMessages) }
     return acc
   }, {} as Record<Names, any>))
 
   const validate = () => {
+    isDirty.value = true
     // Validate each filed to get the error messages
     return fields.value.reduce((acc, field) => {
       return field.validate() && acc
     }, true)
   }
 
   const validateAsync = () => {
+    isDirty.value = true
     return Promise.all(fields.value.map((field) => field.validateAsync())).then((results) => {
       return results.every(Boolean)
     })
   }
 
   const reset = () => {
+    isDirty.value = false
     fields.value.forEach((field) => field.reset())
   }
 
   const resetValidation = () => {
+    isDirty.value = false
     fields.value.forEach((field) => field.resetValidation())
   }
 

diff --git a/packages/ui/src/composables/useValidation.ts b/packages/ui/src/composables/useValidation.ts
@@ -100,6 +100,7 @@ export const useValidation = <V, P extends ExtractPropTypes<typeof useValidation
   const resetValidation = () => {
     computedError.value = false
     computedErrorMessages.value = []
+    isDirty.value = false
   }
 
   const processResults = (results: any[]) => {
@@ -193,6 +194,7 @@ export const useValidation = <V, P extends ExtractPropTypes<typeof useValidation
     doShowError,
     doShowLoading,
     isFormImmediate,
+    isFormDirty,
   } = useFormChild({
     isDirty,
     isValid: computed(() => !computedError.value),
@@ -202,7 +204,11 @@ export const useValidation = <V, P extends ExtractPropTypes<typeof useValidation
     validateAsync,
     resetValidation,
     focus,
-    reset,
+    reset: () => {
+      reset()
+      resetValidation()
+      isDirty.value = false
+    },
     value: computed(() => options.value || props.modelValue),
     name: toRef(props, 'name'),
   })
@@ -212,7 +218,9 @@ export const useValidation = <V, P extends ExtractPropTypes<typeof useValidation
     computedError: computed(() => {
       // Hide error if component haven't been interacted yet
       // Ignore dirty state if immediateValidation is true
-      if (!immediateValidation.value && !isDirty.value) { return false }
+      if (!isFormDirty.value) {
+        if (!immediateValidation.value && !isDirty.value) { return false }
+      }
 
       return doShowError.value ? computedError.value : false
     }),