useForm() hook

Use this hook to access values and methods from a <Formiz> component.

Usage from outside <Formiz>

1. Connect your form

import React from 'react'
import { Formiz, useForm } from '@formiz/core'
import { MyField } from './MyField'
export const MyForm = () => {
const myForm = useForm()
return (
<Formiz connect={myForm}>
{/* Your fields here */}
</Formiz>
)
}

2. Access values and methods

You have now access to the form.

import React from 'react'
import { Formiz, useForm } from '@formiz/core'
import { MyField } from './MyField'
export const MyForm = () => {
const myForm = useForm()
return (
<Formiz connect={myForm}>
<form onSubmit={myForm.submit}>
{myForm.isValid && 'The form is valid!'}
{/* Your fields here */}
<button type="submit">
Submit
</button>
<form>
</Formiz>
)
}

Usage from a child component of <Formiz>

import React from 'react'
import { Formiz, useForm } from '@formiz/core'
import { MyField } from './MyField'
export const MySubComponent = () => {
const myForm = useForm()
return myForm.isValid && 'The form is valid!';
}
export const MyForm = () => {
return (
<Formiz>
...
<MySubComponent />
...
</Formiz>
)
}

Hook values

The useForm return an object with the following properties:

submit()

Allow you to submit the form

<Formiz connect={myForm}>
<form onSubmit={myForm.submit}>
{/* Your fields here */}
<button type="submit">
Submit
</button>
</form>
</Formiz>

isValid

Returns true if the form is valid.

isSubmitted

Returns true if the form is submitted.

values

Returns an object with all the values of the form.

invalidateFields(objectOfErrors)

Allow you to invalidate one or many fields.
Useful for API errors or other external errors.

invalidateFields({
'fieldName': 'My error message',
'secondFieldName': 'Another error message',
})

setFieldsValues(objectOfValues)

Allow you to change the value of one or many fields imperatively.
Useful to change one or many values based on an external action.

⚠️ Don't use undefined as new value, it will not trigger the update (use null instead).

setFieldsValues({
'fieldName': 'New value',
'secondFieldName': 'Another new value',
})

reset()

Allows to reset the form with all fields values to their defaultValue.

resetKey

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

useEffect(() => {
// Reset stuff here
}, [myForm.resetKey]);

getFieldStepName(fieldName)

Allows you to get the step name of a field.

currentStep

Returns the current step name.

steps

Returns an array with all the steps of the form.

isStepValid

Returns true if the current step is valid. Returns an array with all the steps of the form.

isStepSubmitted

Returns true if the current step is submitted.

isFirstStep

Returns true if the current step is the first step.

isLastStep

Returns true if the current step is the last step.

submitStep()

Allows you to submit the current step.

<Formiz connect={myForm}>
<form onSubmit={myForm.submitStep}>
<FormizStep name="step1">
{/* Your fields here */}
</FormizStep>
<FormizStep name="step2">
{/* Your fields here */}
</FormizStep>
<button type="submit">
Submit
</button>
</form>
</Formiz>

nextStep()

Move to the next step.

prevStep()

Move to the previous step.

goToStep(name)

Go to a specific step.