Browse documentation

FormStore

Coordinates form state, validation, transforms and submission.

Table of contents

Category

Value

Import

js
import { FormStore } from "valyrian.js/forms";

Public signature

ts
new FormStore<TState extends FormState>(options: FormOptions<TState>): FormStore<TState>

API form

FormStore is a class. Construct it with initial state and a schema, then bind forms through v-form and controls through v-field or call its methods directly.

Options

ts
type FormOptions<TState> = {
  state: TState;
  schema: Record<string, unknown>;
  clean?: Partial<Record<keyof TState | string, (value, state) => unknown>>;
  format?: Partial<Record<keyof TState | string, (value, state) => unknown>>;
  onSubmit?: (values: TState) => Promise<void> | void;
};

State properties

ts
readonly state: TState
readonly validationErrors: Record<string, string>
readonly submitError: unknown
readonly success: boolean
readonly isInflight: boolean
readonly isDirty: boolean
readonly hasValidationErrors: boolean
readonly hasSubmitError: boolean
static readonly schemaShield: SchemaShield

Essential methods

ts
setField(name: string, rawValue: unknown): void
formatValue(name: string, value: unknown): unknown
validate(): boolean
submit(event?: Event): Promise<boolean>
setSuccess(success: boolean, event?: Event): void
reset(): void

Submission outcomes

submit() resolves false for validation failure, an active submission or an onSubmit error, and resolves true after success. onSubmit errors are stored in submitError. reset() restores initial state and clears validation, submission and inflight state.