fix: return empty array if no errors and clone retrieved errors

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

Hide file tree

Showing 5 changed files with 13 additions and 5 deletions.
diff --git a/packages/core/src/form/formContext.ts b/packages/core/src/form/formContext.ts
@@ -147,7 +147,7 @@ export function createFormContext<TForm extends FormObject = FormObject>({
   }
 
   function getFieldErrors<TPath extends Path<TForm>>(path: TPath) {
-    return getFromPath<string[]>(errors, escapePath(path), []) || [];
+    return [...(getFromPath<string[]>(errors, escapePath(path), []) || [])];
   }
 
   function setFieldErrors<TPath extends Path<TForm>>(path: TPath, message: Arrayable<string>) {

diff --git a/packages/core/src/form/useForm.ts b/packages/core/src/form/useForm.ts
@@ -64,7 +64,7 @@ export function useForm<TForm extends FormObject = FormObject>(opts?: Partial<Fo
   const { actions, onSubmitted, isSubmitting } = useFormActions(ctx, disabled);
 
   function getError<TPath extends Path<TForm>>(path: TPath): string | undefined {
-    return ctx.getFieldErrors(path)?.[0];
+    return ctx.getFieldErrors(path)[0];
   }
 
   provide(FormKey, {

diff --git a/packages/core/src/form/useFormField.ts b/packages/core/src/form/useFormField.ts
@@ -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: errors.value,
+          errors: oldPath ? [...tf.getFieldErrors(oldPath)] : errors.value,
         };
       });
     }

diff --git a/packages/core/src/form/useFormTransactions.ts b/packages/core/src/form/useFormTransactions.ts
@@ -49,7 +49,10 @@ const TransactionKind = {
 export interface FormTransactionManager<TForm extends FormObject> {
   transaction(
     tr: (
-      formCtx: Pick<FormContext<TForm>, 'getValues' | 'getFieldValue' | 'isFieldSet' | 'isFieldTouched'>,
+      formCtx: Pick<
+        FormContext<TForm>,
+        'getValues' | 'getFieldValue' | 'isFieldSet' | 'isFieldTouched' | 'getFieldErrors'
+      >,
       codes: typeof TransactionKind,
     ) => FormTransaction<TForm> | null,
   ): void;

diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue
@@ -2,7 +2,12 @@
   <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}`" :disabled="values.field?.[idx] === 'hello'" />
+        <InputText
+          :name="`field[${idx}]`"
+          :label="`Field ${idx}`"
+          required
+          :disabled="values.field?.[idx] === 'hello'"
+        />
 
         <button type="button" class="bg-red-500 rounded text-white p-2" @click="fields.splice(idx, 1)">X</button>
       </div>