<Formiz> component

Import

import { Formiz } from '@formiz/core'

---

Props

onSubmit(values)

Triggered when the form is submitted.

<Formiz onSubmit={(values) => console.log(values)}>

{/* Your fields here */}

</Formiz>

onValidSubmit(values)

Triggered when the form is valid and submitted.

<Formiz onValidSubmit={(values) => console.log(values)}>

{/* Your fields here */}

</Formiz>

onInvalidSubmit(values)

Triggered when the form is invalid and submitted.

<Formiz onInvalidSubmit={(values) => console.log(values)}>

{/* Your fields here */}

</Formiz>

onChange(values)

Triggered every time the form changes.
⚠️ This is triggered when each field is mounted.
ℹ️ Instead you can get values of the form with the useForm() hook.

<Formiz onChange={(values) => console.log(values)}>

{/* Your fields here */}

</Formiz>

onValid()

Triggered when the form is valid.
ℹ️ Instead you can get isValid value with the useForm() hook.

<Formiz onValid={() => console.log('Form is valid')}>

{/* Your fields here */}

</Formiz>

onInvalid()

Triggered when the form is invalid.
ℹ️ Instead you can get isValid value with the useForm() hook.

<Formiz onInvalid={() => console.log('Form is invalid')}>

{/* Your fields here */}

</Formiz>

autoForm

Set to true to auto add a <form> element with auto onSubmit.
ℹ️ Instead you can get the submit() method with the useForm() hook and use it with your own <form> element.

<Formiz autoForm>

{/* Your fields here */}

</Formiz>

id

Allows you to pass a custom id will be used to create the ids of the fields. By default, it is generated automatically. But for SSR rendering like in NextJS, you may want to replace the automatically generated identifiers by a predictable id.

<Formiz id="custom-id">

{/* Your fields here */}

</Formiz>

initialValues

Allows you to pass some initial values to the form. If a field is mounted, it will lookup into this object to set his initial value.

This is usefull when you getting data from an API like an edit page.

<Formiz initialValues={{ name: 'Lea', email: 'lea@company.com' }}>

<MyField name="name" /> {/* Will be prefilled with 'Lea' */}

<MyField name="email" /> {/* Will be prefilled with 'lea@company.com' */}

</Formiz>

You can use nested objects and arrays.

<Formiz

initialValues={{

collection: [

{ name: 'Lea', email: 'lea@company.com' },

{ name: 'John', email: 'john@company.com' },

]

}}

>

<MyField name="collection[0].name" /> {/* Will be prefilled with 'Lea' */}

<MyField name="collection[0].email" /> {/* Will be prefilled with 'lea@company.com' */}

<MyField name="collection[1].name" /> {/* Will be prefilled with 'John' */}

<MyField name="collection[1].email" /> {/* Will be prefilled with 'john@company.com' */}

</Formiz>

connect

Allow you to connect your form with the useForm() hook.
See useForm() documentation for more details

const MyForm = () => {

const form = useForm()

return (

<Formiz connect={form}>

{/* Your fields here */}

</Formiz>

)

}

---

Handle API errors

const myForm = useForm()

<Formiz

connect={myForm}

onValidSubmit={(values) => {

myForm.invalidateFields({

fieldName: 'Error message',

})

}}

/>

{/* Your fields here */}

</Formiz>