fix: touched state pathless form

formwerkjs · Aug 3, 2024 · fc085eb · fc085eb
1 parent 325c30f
commit fc085eb
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 10 deletions.
diff --git a/packages/core/src/form/useFormField.ts b/packages/core/src/form/useFormField.ts
@@ -41,7 +41,7 @@ export function useFormField<TValue = unknown>(opts?: Partial<FormFieldOptions<T
   const getPath = () => toValue(opts?.path);
   const { fieldValue, pathlessValue, setValue } = useFieldValue(getPath, form, opts?.initialValue);
   const { isTouched, pathlessTouched, setTouched } = useFieldTouched(getPath, form);
-  const { errors, setErrors, isValid, errorMessage } = useFieldValidity(getPath, form);
+  const { errors, setErrors, isValid, errorMessage, pathlessValidity } = useFieldValidity(getPath, form);
 
   const isDirty = computed(() => {
     if (!form) {
@@ -124,7 +124,7 @@ export function useFormField<TValue = unknown>(opts?: Partial<FormFieldOptions<T
           value: cloneDeep(oldPath ? tf.getFieldValue(oldPath) : pathlessValue.value),
           touched: oldPath ? tf.isFieldTouched(oldPath) : pathlessTouched.value,
           disabled: toValue(opts?.disabled) ?? false,
-          errors: oldPath ? [...tf.getFieldErrors(oldPath)] : errors.value,
+          errors: [...(oldPath ? tf.getFieldErrors(oldPath) : pathlessValidity.errors.value)],
         };
       });
     }
@@ -188,7 +188,7 @@ function createFormTouchedRef(getPath: Getter<string | undefined>, form: FormCon
   const isTouched = computed(() => {
     const path = getPath();
 
-    return path ? form.isFieldTouched(path) : false;
+    return path ? form.isFieldTouched(path) : pathlessTouched.value;
   }) as Ref<boolean>;
 
   function setTouched(value: boolean) {
@@ -293,6 +293,7 @@ function createFormValidityRef(getPath: Getter<string | undefined>, form: FormCo
   }
 
   return {
+    pathlessValidity,
     errors,
     setErrors,
   };
@@ -301,10 +302,15 @@ function createFormValidityRef(getPath: Getter<string | undefined>, form: FormCo
 function createLocalValidity() {
   const errors = shallowRef<string[]>([]);
 
-  return {
+  const api = {
     errors,
     setErrors(messages: Arrayable<string>) {
       errors.value = messages ? normalizeArrayable(messages) : [];
     },
   };
+
+  return {
+    pathlessValidity: api,
+    ...api,
+  };
 }
diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue
@@ -2,12 +2,7 @@
   <div class="flex gap-4 relative">
     <form class="w-full">
       <div v-for="(field, idx) in fields" :key="field.id" class="flex items-center">
-        <InputText
-          :name="`field[${idx}]`"
-          :label="`Field ${idx}`"
-          required
-          :disabled="values.field?.[idx] === 'hello'"
-        />
+        <InputText :label="`Field ${idx}`" required />
 
         <button type="button" class="bg-red-500 rounded text-white p-2" @click="fields.splice(idx, 1)">X</button>
       </div>