State

export interface FormValidationResult<E> {
  formValue: FormValue;
  formErrors: FieldErrorsMap<E>;
}

export type FormSubmission<V> = Task<
  [event: SubmitEvent],
  FormValidationResult<AnyFormValueValidatorError<V>>,
  unknown
>;

export type FieldsValidation<V> = Task<
  [config: Config, value: FieldValue],
  FieldError<AnyFieldValueValidatorError<V>>[],
  unknown
>;

export interface FormState<T, V extends Validator> {
  readonly submission: FormSubmission<V>;
  readonly fieldsValidation: FieldsValidation<V>;
  /**
   * An accessor that maintains form state consistency:
   *
   * - A snapshot of the form state is returned on access
   * - Default values from JSON Schema are taken into account during assignment
   */
  value: T | undefined;
  isSubmitted: boolean;
  isChanged: boolean;
  errors: FieldErrorsMap<PossibleError<V>>;
  submit(e: SubmitEvent): void;
  reset(e: Event): void;
}

Direct modification of form state

If you are using a controlled form, you should consider the following aspects:

Initialization

It is recommended to initialize the state as follows:

let value = $state(
  merger.mergeFormDataAndSchemaDefaults(initialValue, schema)
);

Arrays

To modify arrays, use one of the following methods:

1. Reassign

value.array = value.array.concat(123)

2. Use KeyedArray API

import { createForm, type KeyedArraysMap } from "@sjsf/form";

const keyedArraysMap: KeyedArraysMap = new WeakMap()
let value = $state({ array: [] })
const form = createForm({
  keyedArraysMap,
  value: [() => value, (v) => (value = v)],
  // ...otherOptions
})

const api = keyedArraysMap.get(value.array)
if (api) {
  api.push(123)
}