Adds secondary form with age and email fields to OmegaForm story

Author: MakhBeth

packages/vue-components/stories/OmegaForm/Tanstack.vue

@@ -42,6 +42,65 @@
       <pre>{{ errors }}</pre>
     </div>
   </form>
+  <h1>Secondary Form</h1>
+  <form @submit="form2.handleSubmit">
+    <div>
+      <label for="age">Age</label>
+      <form2.Field
+        id="age"
+        name="age"
+        type="number"
+        :validators="{
+          onChange: S.standardSchemaV1(schema.fields['age']),
+        }"
+      >
+        <template #default="{ field }">
+          <div class="field">
+            <input
+              :value="field.state.value"
+              type="number"
+              @input="
+                e =>
+                  field.handleChange(
+                    Number((e.target as HTMLInputElement).value),
+                  )
+              "
+            />
+            <em v-if="field.state.meta.errors.length > 0" role="alert">
+              {{ field.state.meta.errors.map(e => e?.message).join(", ") }}
+            </em>
+          </div>
+        </template>
+      </form2.Field>
+      <label for="email">Email</label>
+      <form2.Field
+        id="email"
+        name="email"
+        type="text"
+        :validators="{
+          onBlur: S.standardSchemaV1(schema.fields['email']),
+        }"
+      >
+        <template #default="{ field }">
+          <div class="field">
+            <input
+              :value="field.state.value"
+              @blur="field.handleBlur"
+              @input="
+                e => field.handleChange((e.target as HTMLInputElement).value)
+              "
+            />
+            <em v-if="field.state.meta.errors.length > 0" role="alert">
+              {{ field.state.meta.errors.map(e => e?.message).join(", ") }}
+            </em>
+          </div>
+        </template>
+      </form2.Field>
+    </div>
+    <div>
+      <pre>{{ errors }}</pre>
+    </div>
+  </form>
 </template>
 
 <script setup lang="ts">
@@ -68,6 +127,16 @@ const form = useForm({
   },
 })
 
+const form2 = useForm({
+  defaultValues: {
+    age: 1,
+    email: "[email protected]",
+  },
+  onSubmit: async ({ value }) => {
+    console.log(value)
+  },
+})
+
 const errors = form.useStore(v => v.errors)
 </script>