NotForm
The root form component that provides context and handles submit/reset events.
<NotForm> is the root component that wraps your form. It provides the form context to all child components and handles the native submit and reset events.
Props
| Prop | Type | Required | Description |
|---|---|---|---|
form | NotFormInstance<TSchema> | Yes | The form instance returned from useNotForm |
Events
| Event | Payload | Description |
|---|---|---|
submit | SubmitEvent | Fired when the form is submitted. Call form.submit() to trigger validation and submission. |
reset | Event | Fired when the form is reset. Call form.reset() to reset the form to initial values. |
Basic Usage
<script setup lang="ts">
import { z } from 'zod'
const schema = z.object({
email: z.email('Invalid email'),
password: z.string().min(8, 'Password must be at least 8 characters'),
})
const form = useNotForm({
onSubmit(values) {
console.log('Form submitted:', values)
},
schema,
})
</script>
<template>
<NotForm
:form="form"
@submit="form.submit"
@reset="form.reset()"
>
<!-- Form fields go here -->
<button type="submit">
Submit
</button>
<button type="reset">
Reset
</button>
</NotForm>
</template>
How It Works
<NotForm> automatically:
- Prevents the default browser form submission behavior
- Provides the form context to all child
<NotField>and<NotArrayField>components - Handles form reset to clear validation errors and restore initial values
Native Form Element
Under the hood, <NotForm> renders a native <form> element, which means:
- You can use native form attributes like
action,method,enctype - Form submission works with keyboard (Enter key) and accessibility tools
- The form integrates naturally with browser validation if needed