From 6e03d9c6efc8f4cfc306813e733d7d3e03706323 Mon Sep 17 00:00:00 2001
From: Romain Hamel <rom.hml@gmail.com>
Date: Tue, 11 Mar 2025 14:50:36 +0100
Subject: [PATCH] feat(Form): global errors (#3482)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 src/runtime/components/Form.vue      | 10 +++++-----
 src/runtime/components/FormField.vue |  2 +-
 src/runtime/types/form.ts            |  2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/runtime/components/Form.vue b/src/runtime/components/Form.vue
index ecf9f31e..fe4b451c 100644
--- a/src/runtime/components/Form.vue
+++ b/src/runtime/components/Form.vue
@@ -29,7 +29,7 @@ export interface FormEmits<T extends object> {
 }
 
 export interface FormSlots {
-  default(props?: {}): any
+  default(props?: { errors: FormError[] }): any
 }
 </script>
 
@@ -121,7 +121,7 @@ const blurredFields = new Set<keyof T>()
 function resolveErrorIds(errs: FormError[]): FormErrorWithId[] {
   return errs.map(err => ({
     ...err,
-    id: inputs.value[err.name]?.id
+    id: err?.name ? inputs.value[err.name]?.id : undefined
   }))
 }
 
@@ -159,12 +159,12 @@ async function _validate(opts: { name?: keyof T | (keyof T)[], silent?: boolean,
   if (names) {
     const otherErrors = errors.value.filter(error => !names.some((name) => {
       const pattern = inputs.value?.[name]?.pattern
-      return name === error.name || (pattern && error.name.match(pattern))
+      return name === error.name || (pattern && error.name?.match(pattern))
     }))
 
     const pathErrors = (await getErrors()).filter(error => names.some((name) => {
       const pattern = inputs.value?.[name]?.pattern
-      return name === error.name || (pattern && error.name.match(pattern))
+      return name === error.name || (pattern && error.name?.match(pattern))
     }))
 
     errors.value = otherErrors.concat(pathErrors)
@@ -269,6 +269,6 @@ defineExpose<Form<T>>({
     :class="form({ class: props.class })"
     @submit.prevent="onSubmitWrapper"
   >
-    <slot />
+    <slot :errors="errors" />
   </component>
 </template>
diff --git a/src/runtime/components/FormField.vue b/src/runtime/components/FormField.vue
index afa453a2..c10b7dab 100644
--- a/src/runtime/components/FormField.vue
+++ b/src/runtime/components/FormField.vue
@@ -63,7 +63,7 @@ const ui = computed(() => formField({
 
 const formErrors = inject<Ref<FormError[]> | null>('form-errors', null)
 
-const error = computed(() => props.error || formErrors?.value?.find(error => error.name === props.name || (props.errorPattern && error.name.match(props.errorPattern)))?.message)
+const error = computed(() => props.error || formErrors?.value?.find(error => error.name && (error.name === props.name || (props.errorPattern && error.name.match(props.errorPattern))))?.message)
 
 const id = ref(useId())
 // Copies id's initial value to bind aria-attributes such as aria-describedby.
diff --git a/src/runtime/types/form.ts b/src/runtime/types/form.ts
index 5d21282d..7bf3c25c 100644
--- a/src/runtime/types/form.ts
+++ b/src/runtime/types/form.ts
@@ -36,7 +36,7 @@ export type FormSchema<T extends object> =
 export type FormInputEvents = 'input' | 'blur' | 'change' | 'focus'
 
 export interface FormError<P extends string = string> {
-  name: P
+  name?: P
   message: string
 }