Skip to content
Playground Form Builder

Options

export type InitialErrors =
| ValidationError[]
// WARN: This should't be an array
| Iterable<readonly [FieldPath, string[]]>;
const UI_OPTIONS_REGISTRY_KEY = "uiOptionsRegistry";
export type UiOptionsRegistryOption = keyof UiOptionsRegistry extends never
? {
[UI_OPTIONS_REGISTRY_KEY]?: UiOptionsRegistry;
}
: {
[UI_OPTIONS_REGISTRY_KEY]: UiOptionsRegistry;
};
export interface IdBuilderFactoryOptions {
idPrefix: string;
schema: Schema;
uiSchema: UiSchemaRoot;
uiOptionsRegistry: UiOptionsRegistry;
validator: Validator;
merger: FormMerger;
valueRef: Ref<FormValue>;
}
export interface ValidatorFactoryOptions {
idBuilder: FormIdBuilder;
schema: Schema;
uiSchema: UiSchemaRoot;
uiOptionsRegistry: UiOptionsRegistry;
/**
* This is a getter that can be used to access the Merger lazily.
*/
merger: () => FormMerger;
}
export interface MergerFactoryOptions {
validator: Validator;
schema: Schema;
uiSchema: UiSchemaRoot;
uiOptionsRegistry: UiOptionsRegistry;
}
// from '@sjsf/form/lib/svelte.svelte'
export type Bind<T> = [get: () => T, set: (v: T) => void];
export type Creatable<Result, Options> =
| ((options: Options) => Result)
| (() => Result)
| Result;
export interface FormOptions<T> extends UiOptionsRegistryOption {
schema: Schema;
theme: Theme;
translation: Translation;
resolver: (ctx: FormState<T>) => ResolveFieldType;
idBuilder: Creatable<FormIdBuilder, IdBuilderFactoryOptions>;
validator: Creatable<Validator, ValidatorFactoryOptions>;
merger: Creatable<FormMerger, MergerFactoryOptions>;
/**
* @default DEFAULT_ID_PREFIX
*/
idPrefix?: string;
icons?: Icons;
uiSchema?: UiSchemaRoot;
extraUiOptions?: ExtraUiOptions;
fieldsValidationMode?: FieldsValidationMode;
disabled?: boolean;
initialValue?: DeepPartial<T>;
value?: Bind<T>;
initialErrors?: InitialErrors;
/**
* @default waitPrevious
*/
submissionCombinator?: TasksCombinator<
[event: SubmitEvent],
FormValidationResult,
unknown
>;
/**
* @default 500
*/
submissionDelayedMs?: number;
/**
* @default 8000
*/
submissionTimeoutMs?: number;
/**
* @default 300
*/
fieldsValidationDebounceMs?: number;
/**
* @default abortPrevious
*/
fieldsValidationCombinator?: TasksCombinator<
[Config, FormValue],
Update<string[]>,
unknown
>;
/**
* @default 500
*/
fieldsValidationDelayedMs?: number;
/**
* @default 8000
*/
fieldsValidationTimeoutMs?: number;
/**
* Submit handler
*
* Will be called when the form is submitted and form data
* snapshot is valid
*
* Note that we rely on `validator.validateFormData` to check that the
* `formData is T`. So make sure you provide a `T` type that
* matches the validator check result.
*/
onSubmit?: (value: T, e: SubmitEvent) => void;
/**
* Submit error handler
*
* Will be called when the form is submitted and form data
* snapshot is not valid
*/
onSubmitError?: (
result: FailureValidationResult,
e: SubmitEvent,
form: FormState<T>
) => void;
/**
* Form submission error handler
*
* Will be called when the submission fails by a different reasons:
* - submission is cancelled
* - error during validation
* - validation timeout
*/
onSubmissionFailure?: (state: FailedTask<unknown>, e: SubmitEvent) => void;
/**
* Field validation error handler
*/
onFieldsValidationFailure?: (
state: FailedTask<unknown>,
config: Config,
value: FormValue
) => void;
/**
* Reset handler
*
* Will be called when the form is reset.
*
* The event will be `undefined` if `reset` is called manually without passing an event.
*/
onReset?: (e?: Event) => void;
schedulerYield?: SchedulerYield;
keyedArraysMap?: KeyedArraysMap;
}