From b4b087c4e5893a8106f45cea134d8ff28d2e7558 Mon Sep 17 00:00:00 2001
From: Asoka Wotulo <asokawotulo@yahoo.com>
Date: Thu, 3 Oct 2024 14:22:20 +0700
Subject: [PATCH 1/2] docs(form): specify component ref type

---
 docs/content/2.components/form.md | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/docs/content/2.components/form.md b/docs/content/2.components/form.md
index 851f1ed684..1524ccbce9 100644
--- a/docs/content/2.components/form.md
+++ b/docs/content/2.components/form.md
@@ -117,16 +117,26 @@ You can manually set errors after form submission if required. To do this, simpl
 
 ```vue
 <script setup lang="ts">
-import type { FormError, FormSubmitEvent } from '#ui/types'
+import type { Form, FormSubmitEvent } from '#ui/types'
 
-const state = reactive({
+interface Schema {
+  email?: string
+  password?: string
+}
+
+const state = reactive<Schema>({
   email: undefined,
   password: undefined
 })
 
-const form = ref()
+const form = ref<Form<Schema>>()
+
+async function onSubmit (event: FormSubmitEvent<Schema>) {
+  if (!form.value) {
+    console.error("Form component not mounted yet")
+    return
+  }
 
-async function onSubmit (event: FormSubmitEvent<any>) {
   form.value.clear()
   try {
     const response = await $fetch('...')

From 75b0557e8dcdd772ee3a07ec3b197fd551b86dc7 Mon Sep 17 00:00:00 2001
From: Asoka Wotulo <asokawotulo@yahoo.com>
Date: Thu, 3 Oct 2024 21:07:47 +0700
Subject: [PATCH 2/2] docs(form): remove undefined form value check

---
 docs/content/2.components/form.md | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/docs/content/2.components/form.md b/docs/content/2.components/form.md
index 1524ccbce9..53f4ba351f 100644
--- a/docs/content/2.components/form.md
+++ b/docs/content/2.components/form.md
@@ -132,18 +132,13 @@ const state = reactive<Schema>({
 const form = ref<Form<Schema>>()
 
 async function onSubmit (event: FormSubmitEvent<Schema>) {
-  if (!form.value) {
-    console.error("Form component not mounted yet")
-    return
-  }
-
-  form.value.clear()
+  form.value!.clear()
   try {
     const response = await $fetch('...')
     // ...
   } catch (err) {
     if (err.statusCode === 422) {
-      form.value.setErrors(err.data.errors.map((err) => ({
+      form.value!.setErrors(err.data.errors.map((err) => ({
         // Map validation errors to { path: string, message: string }
         message: err.message,
         path: err.path,