feat(FormField): add error-pattern prop (#2601)

docs/content/3.components/form.md

@@ -64,7 +64,7 @@ It requires two props:
   ::
 ::
 
-Errors are reported directly to the [FormField](/components/form-field) component based on the `name` prop. This means the validation rules defined for the `email` attribute in your schema will be applied to `<FormField name="email">`{lang="vue"}.
+Errors are reported directly to the [FormField](/components/form-field) component based on the `name` or `error-pattern` prop. This means the validation rules defined for the `email` attribute in your schema will be applied to `<FormField name="email">`{lang="vue"}.
 
 Nested validation rules are handled using dot notation. For example, a rule like `{ user: z.object({ email: z.string() }) }`{lang="ts"} will be applied to `<FormField name="user.email">`{lang="vue"}.
 

src/runtime/components/FormField.vue

@@ -12,7 +12,10 @@ const formField = tv({ extend: tv(theme), ...(appConfig.ui?.formField || {}) })
 type FormFieldVariants = VariantProps<typeof formField>
 
 export interface FormFieldProps {
+  /** The name of the FormField. Also used to match form errors. */
   name?: string
+  /** A regular expression to match form error names. */
+  errorPattern?: RegExp
   label?: string
   description?: string
   help?: string
@@ -54,7 +57,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)?.message)
+const error = computed(() => props.error || formErrors?.value?.find(error => error.name === props.name || (props.errorPattern && error.name.match(props.errorPattern)))?.message)
 
 const id = ref(useId())
 

test/components/Form.spec.ts

@@ -363,4 +363,34 @@ describe('Form', () => {
       expect(wrapper.setupState.onError).toHaveBeenCalledTimes(0)
     })
   })
+
+  test('form field errorPattern works', async () => {
+    const wrapper = await mountSuspended({
+      components: {
+        UFormField,
+        UForm,
+        UInput
+      },
+      setup() {
+        const form = ref()
+        const state = reactive({})
+        function validate() {
+          return [{ name: 'email.1', message: 'Error message' }]
+        }
+        return { state, validate, form }
+      },
+      template: `
+          <UForm ref="form" :state="state" :validate="validate">
+            <UFormField id="emailField" :error-pattern="/(email)\\..*/">
+              <UInput id="emailInput" v-model="state.email" />
+            </UFormField>
+          </UForm>
+        `
+    })
+
+    const form = wrapper.setupState.form
+    form.value.submit()
+    await flushPromises()
+    expect(wrapper.html()).toContain('Error message')
+  })
 })