feat(Form): add attach prop to opt-out of nested form attachement (#3939)

romhml · web-flow · commit 1a0d7a3103cf · 2025-04-20T17:29:36.000+02:00
diff --git a/docs/app/components/content/examples/form/FormExampleNested.vue b/docs/app/components/content/examples/form/FormExampleNested.vue
@@ -39,7 +39,7 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
       <UCheckbox v-model="state.news" name="news" label="Register to our newsletter" @update:model-value="state.email = undefined" />
     </div>
 
-    <UForm v-if="state.news" :state="state" :schema="nestedSchema">
+    <UForm v-if="state.news" :state="state" :schema="nestedSchema" attach>
       <UFormField label="Email" name="email">
         <UInput v-model="state.email" placeholder="john@lennon.com" />
       </UFormField>
diff --git a/docs/app/components/content/examples/form/FormExampleNestedList.vue b/docs/app/components/content/examples/form/FormExampleNestedList.vue
@@ -51,7 +51,14 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
       <UInput v-model="state.customer" placeholder="Wonka Industries" />
     </UFormField>
 
-    <UForm v-for="item, count in state.items" :key="count" :state="item" :schema="itemSchema" class="flex gap-2">
+    <UForm
+      v-for="item, count in state.items"
+      :key="count"
+      :state="item"
+      :schema="itemSchema"
+      attach
+      class="flex gap-2"
+    >
       <UFormField :label="!count ? 'Description' : undefined" name="description">
         <UInput v-model="item.description" />
       </UFormField>
diff --git a/src/runtime/components/Form.vue b/src/runtime/components/Form.vue
@@ -36,6 +36,13 @@ export interface FormProps<T extends object> {
    * @defaultValue `true`
    */
   transform?: boolean
+
+  /**
+   * If true, this form will attach to its parent Form (if any) and validate at the same time.
+   * @defaultValue `true`
+   */
+  attach?: boolean
+
   /**
    * When `true`, all form elements will be disabled on `@submit` event.
    * This will cause any focused input elements to lose their focus state.
@@ -70,6 +77,7 @@ const props = withDefaults(defineProps<FormProps<T>>(), {
     return ['input', 'blur', 'change'] as FormInputEvents[]
   },
   validateOnInputDelay: 300,
+  attach: true,
   transform: true,
   loadingAuto: true
 })
@@ -84,7 +92,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.form || {})
 const formId = props.id ?? useId() as string
 
 const bus = useEventBus<FormEvent<T>>(`form-${formId}`)
-const parentBus = inject(
+const parentBus = props.attach && inject(
   formBusInjectionKey,
   undefined
 )
