useForm

This hook creates a form, and returns it.

Import

import { useForm } from "@formiz/core";

Form State

isValid

boolean

Return true if all form fields are valid, else return false.

const form = useForm();
form.isValid;

isValidating

boolean

Return true if at least one field is running async validations, else return false.

const form = useForm();
form.isValidating;

isSubmitted

boolean

Return true if the form has been submitted, else return false.

const form = useForm();
form.isSubmitted;

resetKey

number

A key that change when form is reset.

Allow you to reset some internal state when the form is reset.

const form = useForm();
useEffect(() => {
  /* Do a side effect on reset */
}, [form.resetKey]);

currentStep

string

The name of the current step.

const form = useForm();
form.currentStep;

steps

Array<string>

An array that contains all form steps.

const form = useForm();
form.steps;

isStepPristine

boolean

Return true if all current step fields are pristine, else return false.

const form = useForm();
form.isStepPristine;

isStepValid

boolean

Return true if all current step fields are valid, else return false.

const form = useForm();
form.isStepValid;

isStepValidating

boolean

Return true if at least one current step field is running async validations, else return false.

const form = useForm();
form.isStepValidating;

isStepSubmitted

boolean

Return true if the current step has been submitted, else return false.

const form = useForm();
form.isStepSubmitted;

isFirstStep

boolean

Return true if the current step is the first form step, else return false.

const form = useForm();
form.isFirstStep;

isLastStep

boolean

Return true if the current step is the last form step, else return false.

const form = useForm();
form.isLastStep;

Form Actions

submit()

() => void

Submit whole form.

const form = useForm();
form.submit();

submitStep()

() => void

Submit current step.

const form = useForm();
form.submitStep();

setErrors(errors)

(errors: Record<string, string>) => void

Manually set errors on form fields.

const form = useForm();
form.setErrors({ field: "Error" });

setValues(values, options)

(values: Record<string, string>, options?: { keepPristine?: boolean }) => void

Mnually set form fields values.

keepPristine option allow you to choose if setValues keep unchanged fields pristine state. By default, keepPristine is true

const form = useForm();
form.setValues({ field: "New value" }, { keepPristine: false });

reset(options)

(options: { ['only' | 'exclude']: Array<ResetElement>}) => void

ResetElement = 'pristine' | 'submitted' | 'touched' | 'validating' | 'debouncing' | 'resetKey' | 'currentStep' | 'visited' | 'values'

Reset form's states and values.

Options allow you to select the data you want to reset.

const form = useForm();
form.reset({ only: "values" });
form.reset({ exclude: "pristine" });

getStepByFieldName(fieldName)

(fieldName: string) => FormizStep

Get step informations from field name.

const form = useForm();
const step = form.getStepByFieldName("field");

goToNextStep()

() => void

Navigate to next step.

const form = useForm();
form.goToNextStep();

goToPreviousStep()

() => void

Navigate to previous step.

const form = useForm();
form.goToPreviousStep();

goToStep(name)

(name: string) => void

Navigate to a step.

const form = useForm();
form.goToStep("step-2");