---
tags: zeta-dom-react
---

# `FormContext` class

## Properties

#### `FormContext.data`

Gets a dictionary containing field values.

#### `FormContext.isValid`

Returns if all fields have passed validations.

## Methods

#### `static FormContext.get()`

Retrieve the associated `FormContext` object if a `<form>` element is rendered using `<Form>` component or manually assigned `FormContext.ref` to a `<form>` element.

import { Form, useFormContext } from "zeta-dom-react";

function MyForm() {
    const form = useFormContext();
    return (
        <Form context={form}>
            <Child />
        </Form>
    );
}

function Child() {
    const ref = useRef();
    useEffect(() => {
        const formElement = ref.current.closest('form');
        if (formElement) {
            // this can retreive the `FormContext` object
            // created by the parent `<MyForm>` component
            const form = FormContext.get(formElement);
        }
    }, []);
    return (
        <div ref={ref}>
            {/* ... */}
        </div>
    );
}

#### `FormContext.element()`

Retrieves element of a named field.

#### `FormContext.focus()`

Focus input control of a named field.

#### `FormContext.on()`

Registers event handlers.

#### `FormContext.persist()`

Persist form data to view state.

#### `FormContext.reset()`

Resets all fields to initial values and clear all validation errors.

#### `FormContext.restore()`

Restore form data from view state.

#### `FormContext.getError()`

Gets error state on a named field.

#### `FormContext.getErrors()`

==Since `0.4.4`==

Gets all validation errors.

It returns an object which each key is the name of an invalid field, and value is the corresponding error; or `null` if there is no error.

// log all errors in console if validation failed
if (!await field.validate()) {
    each(form.getErrors(), (field, error) => {
        console.log(field, error);
    });
}

#### `FormContext.setError()`

Forces error state on a named field.

#### `FormContext.validate()`

Validates all or specific fields.

const form = useFormContext();

async function checkAll() {
    let isValid = await form.validate();
}
async function checkNameAndEmail() {
    let isValid = await form.validate('name', 'email');
}

## Events

#### `dataChange` event

Allow effects to apply when certain field has changed.

useEffect(() => {
    return form.on('dataChange', e => {
        if (e.data.includes('item')) {
            /* ... */
        }
    });
}, [form])

#### `reset` event

#### `validate` event

#### `validationChange` event

Deprecated