useForm

This hook creates a form, and returns it.

Import

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

Form State

isValid

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

const form = useForm();
form.isValid;

isValidating

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

const form = useForm();
form.isValidating;

isSubmitted

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

const form = useForm();
form.isSubmitted;

resetKey

A key that change when form is reset.

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

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

currentStep

The name of the current step.

const form = useForm();
form.currentStep;

steps

An array that contains all form steps.

const form = useForm();
form.steps;

isStepPristine

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

const form = useForm();
form.isStepPristine;

isStepValid

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

const form = useForm();
form.isStepValid;

isStepValidating

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

const form = useForm();
form.isStepValidating;

isStepSubmitted

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

const form = useForm();
form.isStepSubmitted;

isFirstStep

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

const form = useForm();
form.isFirstStep;

isLastStep

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

const form = useForm();
form.isLastStep;

Form Actions

submit()

Submit whole form.

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

submitStep()

Submit current step.

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

setErrors(errors)

Manually set errors on form fields.

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

setValues(values, options)

Manually set form fields values.

keepPristine option allows 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)

Reset form's states and values. Options allows you to select the data you want to reset.

Available options: "pristine", "submitted", "touched", "validating", "debouncing", "resetKey", "currentStep", "visited", "values"

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

getStepByFieldName(fieldName)

Get step informations from field name.

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

goToNextStep()

Navigate to next step.

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

goToPreviousStep()

Navigate to previous step.

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

goToStep(name)

Navigate to a step.

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