useForm

This hook create a form, and return it.

Import

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

Form State

isValid

boolean

Return true if all form fieds are valid, false otherwise.

const form = useForm();
form.isValid;

isValidating

boolean

Return true if at least field is running async validations, false otherwise.

const form = useForm();
form.isValidating;

isSubmitted

boolean

Return true if the form has been submitted, false otherwise.

const form = useForm();
form.isSubmitted;

resetKey

string

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, false otherwise.

const form = useForm();
form.isStepPristine;

isStepValid

boolean

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

const form = useForm();
form.isStepValid;

isStepValidating

boolean

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

const form = useForm();
form.isStepValidating;

isStepSubmitted

boolean

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

const form = useForm();
form.isStepSubmitted;

isFirstStep

boolean

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

const form = useForm();
form.isFirstStep;

isLastStep

boolean

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

const form = useForm();
form.isLastStep;

Form Actions

submit()

() => void

Function for submit form.

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

submitStep()

() => void

Function for submit current step.

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

setErrors(errors)

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

Function for manually set errors on form fields.

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

setValues(values, options)

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

Function for manually set form fields values.

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

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

reset(options)

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

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

Function for reset form states and values.

Options allow you to select data you want to reset.

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

getStepByFieldName(fieldName)

(fieldName: string) => FormizStep

Function for get step informations from field name.

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

goToNextStep()

() => void

Function for navigate to next step.

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

✅ goToPreviousStep()

() => void

Function for navigate to previous step.

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

goToStep(name)

(name: string) => void

Function for navigate to a step.

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

Try it

{
  "resetKey": 0,
  "isSubmitted": false,
  "isValid": true,
  "isValidating": false,
  "isPristine": true,
  "steps": [],
  "isStepPristine": true,
  "isStepValid": true,
  "isStepValidating": false,
  "isStepSubmitted": false,
  "isFirstStep": true,
  "isLastStep": true
}