createForm
A composable for building reactive forms with validation, field registration, and submission handling. Built on top of the registry system for managing form fields.
Usage
The form composables provide a powerful interface for managing form state, validation, and submission. Built on the registry pattern, they handle form-specific requirements like validation rules, error states, and field lifecycle management.
Creating a Form
Use createForm to create a new form instance:
import { createForm } from '@vuetify/v0'
const form = createForm()
const email = form.register({
id: 'email',
value: '',
rules: [
(value) => value.includes('@') || 'Must be a valid email',
(value) => value.length > 0 || 'Required'
]
})
console.log(email.value) // ''
console.log(email.errors.value) // []Injecting a Form Context
Use useForm to inject an existing form context (typically provided by a parent component):
import { useForm } from '@vuetify/v0'
// Injects the form context provided by an ancestor
const form = useForm()Reactivity
createForm adds reactive validation state on top of createRegistry. Form-level and field-level state are fully reactive.
| Property/Method | Reactive | Notes |
|---|---|---|
isValid | Computed from all fields | |
isValidating | Computed from all fields | |
ticket.value | ShallowRef, triggers validation on change | |
ticket.errors | ShallowRef array | |
ticket.isValid | ShallowRef (null/true/false) | |
ticket.isPristine | ShallowRef boolean | |
ticket.isValidating | ShallowRef boolean | |
get(id) | Returns ticket with reactive refs | |
values() | Use useProxyRegistry() for reactive collection |
Architecture
createForm extends createRegistry with validation capabilities:
Functions
Options
Properties
Methods
seek
(direction?: "first" | "last", from?: number, predicate?: (ticket) => boolean) => Z | undefinedSeek for a ticket based on direction and optional predicate
on
<K extends Extensible<RegistryEventName>>(event: K, cb: EventHandler<Z, K>) => voidListen for registry events
off
<K extends Extensible<RegistryEventName>>(event: K, cb: EventHandler<Z, K>) => voidStop listening for registry events
emit
<K extends Extensible<RegistryEventName>>(event: K, data: EventPayload<Z, K>) => voidEmit an event with data
batch
<R>(fn: () => R) => RExecute operations in a batch, deferring cache invalidation and event emission until complete
register
(registration: Partial<Z>) => Eonboard
(registrations: Partial<Z>[]) => E[]submit
(id?: ID | ID[]) => Promise<boolean>reset
() => void