Methods

Here’s the complete documentation with examples for each method:

Updates the value of a specific field in the form.

const { changeValue } = useForm();

changeValue('username', 'newUsername');

An object containing validation errors for the form fields.

const { errors } = useForm();

console.log(errors);

Options and configurations for the form fields.

const { field } = useForm();

console.log(field);

Representation of the current state of the form data.

const { form } = useForm();

console.log(form);

Get the validation errors for a specific field in the form.

const { getErrors } = useForm();

const errors = getErrors('username');

Checks if a specific field in the form has been modified.

const { getIsDirtyField } = useForm();

const isUsernameDirty = getIsDirtyField('username');

Get the current value of a specific field in the form.

const { getValue } = useForm();

const usernameValue = getValue('username');

Handles form submission.

const { handleSubmit } = useForm();

const onSubmit = handleSubmit((form) => {
  // Your form submission logic here
});

Checks if a specific field in the form has validation errors.

const { hasError } = useForm();

const hasErrorUsername = hasError('username');

Indicates whether the form has been modified.

const { isDirty } = useForm();

console.log(isDirty.value);

Indicates whether the form is currently in a valid state.

const { isValid } = useForm();

console.log(isValid);

Attaches an event listener to a specific form field.

const { onChange } = useForm();

const handleChange = onChange('username');

Resets the form to a specified state.

const { reset } = useForm();

reset({ username: '', password: '' });

Resets the dirty state of the form.

const { resetIsDirty } = useForm();

resetIsDirty();

Sets a validation error for the form or a specific field.

const { setError } = useForm();

setError({ error: 'Invalid username', path: 'username' });

Registers a callback function to watch for changes in the form’s state.

const { watch } = useForm();

watch((changedKeys) => {
  console.log('Changed keys:', changedKeys);
});

On This Page