useForm()

useForm hook provides everything needed for form state management. It receive FormConfig and returns a FormContext that can be used to manipulate form state and passed down to nested components via a FormProvider

function useForm(config: FormConfig): FormContext;

Form config

interface FormConfig<Values, SubmissionResult> {
initialValues: Values;
enableReinitialize?: boolean;
reinitializeOptions?: ResetOptions;
onSubmit: (
values: Values,
context: SubmissionContext<Values>
) => Promise<SubmissionResult> | SubmissionResult;
validationSchema?: ObjectSchema<Values>;
}

initialValues Required

The initial field values of the form.

enableReinitialize

TBD

reinitializeOptions

TBD - ResetOptions

onSubmit Required

function onSubmit(
values: Values,
context: SubmissionContext<Values>
): Promise<SubmissionResult> | SubmissionResult;

validationSchema

A Yup object validation schema.

Form context

interface FormContext<Values extends Record<string, any>, SubmissionResult> {
// Form
initialValues: Values;
values: Values;
validationErrors: Record<string, FieldError>;
changes: Patch[];
touchedFields: DeepFlagMap;
status: FormStatus;
isValidating: boolean;
isSubmitting: boolean;
isDirty: boolean;
submission: {
result?: SubmissionResult;
error?: string;
count: number;
};
submit: () => void;
dismissSubmissionError: () => void;
reset: (values?: Values, options?: ResetOptions) => void;
// Field
fieldProps: <FieldValue = any>(
options: FieldConfig<FieldValue> | string
) => FieldProps;
setFieldValue: <FieldValue = any>(
fieldPath: string,
newValue: FieldValue
) => void;
setFieldTouched: (fieldPath: string, touched?: boolean) => void;
resetField: (fieldPath: string) => void;
dismissValidationErrors: (fieldPaths?: string[] | string) => void;
isTouched(fieldPath: string): boolean;
isFieldDirty(fieldPath: string): boolean;
// Array field
append: <ItemValue = any>(fieldPath: string, value: ItemValue) => void;
swap: (fieldPath: string, indexA: number, indexB: number) => void;
move: (fieldPath: string, from: number, to: number) => void;
insert: <ItemValue = any>(
fieldPath: string,
index: number,
value: ItemValue
) => void;
prepend: <ItemValue = any>(fieldPath: string, value: ItemValue) => void;
remove: (fieldPath: string, index: number) => void;
replace: <ItemValue = any>(
fieldPath: string,
index: number,
value: ItemValue
) => void;
}

initialValues

Values;

values

Values;

validationErrors

Record<string, FieldError>

changes

Patch[]

touchedFields

DeepFlagMap

status

FormStatus

isValidating

isSubmitting

isDirty

submission

{
result?: SubmissionResult;
error?: string;
count: number;
}

submit

() => void

dismissSubmissionError

() => void

reset

(values?: Values, options?: ResetOptions) => void

fieldProps

<FieldValue>(options: FieldConfig<FieldValue> | string) => FieldProps;

setFieldValue

<FieldValue>(fieldPath: string, newValue: FieldValue) => void

setFieldTouched

(fieldPath: string, touched?: boolean) => void

resetField

(fieldPath: string) => void

dismissValidationErrors

(fieldPaths?: string[] | string) => void

isTouched

(fieldPath: string): boolean

isFieldDirty

(fieldPath: string): boolean

append

<ItemValue>(fieldPath: string, value: ItemValue) => void

swap

(fieldPath: string, indexA: number, indexB: number) => void

move

(fieldPath: string, from: number, to: number) => void

insert

<ItemValue>(fieldPath: string, index: number, value: ItemValue) => void

prepend

<ItemValue>(fieldPath: string, value: ItemValue) => void

remove

(fieldPath: string, index: number) => void

replace

<ItemValue>(fieldPath: string, index: number, value: ItemValue) => void
Edit this page