@gluonjs/core / packages/molecules/src / FormSnapshot

Interface: FormSnapshot<Values>

Type Parameters

Values

Values extends Record<string, unknown>

Properties

errors

readonly errors: Readonly<FormErrors<Values>>

---

initialValues

readonly initialValues: Readonly<Values>

---

touched

readonly touched: Readonly<FormTouched<Values>>

---

values

readonly values: Readonly<Values>

---

version

readonly version: 1

Example

Transport initial values, current values, errors, and touched state between SSR and the browser:

import { createFormController, type FormController, type FormControllerOptions, type FormErrors, type FormFieldBinding, type FormFieldName, type FormListener, type FormOperationOptions, type FormSnapshot, type FormState, type FormSubmitHandler, type FormSubmitResult, type FormTouched, type FormValidationContext, type FormValidator } from '@gluonjs/molecules';

type Profile = { email: string; name: string };
type SubmitResult = { id: string };
const validate: FormValidator<Profile> = (values, context) => values.email.includes('@') ? {} : { email: 'Enter a valid email.' };
const submit: FormSubmitHandler<Profile, SubmitResult> = async (values, context) => ({ id: values.email });
const options = { initialValues: { email: '', name: '' }, validate, onSubmit: submit } satisfies FormControllerOptions<Profile, SubmitResult>;
const controller: FormController<Profile, SubmitResult> = createFormController(options);
const email: FormFieldBinding<Profile, 'email'> = controller.register('email');
const fieldName: FormFieldName<Profile> = email.name;
const errors: FormErrors<Profile> = controller.state.errors;
const touched: FormTouched<Profile> = controller.state.touched;
const state: FormState<Profile> = controller.state;
const listener: FormListener<Profile> = (nextState) => console.log(nextState.dirty);
const context: FormValidationContext<Profile> = { values: state.values, touched, signal: new AbortController().signal };
const operation: FormOperationOptions = { signal: context.signal };
const snapshot: FormSnapshot<Profile> = controller.snapshot();
const result: FormSubmitResult<SubmitResult> = await controller.submit(operation);
controller.subscribe(listener);
controller.hydrate(snapshot);
console.log(fieldName, errors, context.signal.aborted, result.ok);
controller.dispose();