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.

Copy Page as Markdown

100% coverage

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()

Architecture

useForm extends useRegistry with validation capabilities:

API Reference

The following API details are for the useForm composable.

Functions

createForm

(options?: FormOptions) => E

Creates a new form instance.

createFormContext

(_options?: FormContextOptions) => ContextTrinity<E>

Creates a new form context.

useForm

(namespace?: string) => E

Returns the current form instance.

Options

events

boolean

Enable event emission for registry operations

Default: false

validateOn

string

Properties

collection

ReadonlyMap<ID, Z>

The collection of tickets in the registry

size

number

The number of tickets in the registry

validateOn

string

isValid

ComputedRef<boolean>

isValidating

ComputedRef<boolean>

Methods

clear

() => void

Clear the entire registry

has

(id: ID) => boolean

Check if a ticket exists by ID

keys

() => ID[]

Get all registered IDs

browse

(value: unknown) => ID[] | undefined

Browse for an ID(s) by value

lookup

(index: number) => ID | undefined

lookup a ticket by index number

get

(id: ID) => Z | undefined

Get a ticket by ID

upsert

(id: ID, ticket?: Partial<Z>) => Z

Update or insert a ticket by ID

values

() => Z[]

Get all values of registered tickets

entries

() => [ID, Z][]

Get all entries of registered tickets

register

(ticket?: Partial<Z>) => Z

unregister

(id: ID) => void

Unregister an ticket by ID

reindex

() => void

Reset the index directory and update all tickets

seek

(direction?: "first" | "last", from?: number, predicate?: (ticket) => boolean) => Z | undefined

Seek for a ticket based on direction and optional predicate

on

(event: string, cb: RegistryEventCallback) => void

Listen for registry events

off

(event: string, cb: RegistryEventCallback) => void

Stop listening for registry events

emit

(event: string, data: unknown) => void

Emit an event with data

dispose

() => void

Clears the registry and removes all listeners

onboard

(registrations: Partial<Z>[]) => Z[]

Onboard multiple tickets at once

offboard

(ids: ID[]) => void

Offboard multiple tickets at once

batch

<R>(fn: () => R) => R

Execute operations in a batch, deferring cache invalidation and event emission until complete

submit

(id?: ID | ID[]) => Promise<boolean>

reset

() => void