Form errors

Manipulate form errors with use-form hook

Errors object

form.errors is an object of React nodes that contains validation errors:

import { useForm } from '@mantine/form';

const form = useForm({
  initialValues: { firstName: '', lastName: '' },
  validate: {
    firstName: (value) => (value.length < 2 ? 'First name is too short' : null),
    lastName: (value) => (value.length < 2 ? 'Last name is too short' : null),
  },
});

// Errors object is empty by default
form.errors; // -> {}

// Errors will be filled when you call form.validate manually
// or automatically with form.onSubmit handler
form.validate();

form.errors; // ->
// {
//   firstName: 'First name is too short',
//   lastName: 'Last name is too short'
// }

Initial errors

Same as with initial values you can set initial form errors:

import { useForm } from '@mantine/form';

const form = useForm({
  initialValues: { firstName: '', lastName: '' },
  initialErrors: {
    firstName: 'First name is too short',
    lastName: 'Last name is too short',
  },
});

setErrors handler

import { useForm } from '@mantine/form';

const form = useForm();
form.setErrors({ firstName: 'Too short', email: 'Invalid email' });

form.errors;
// -> { firstName: 'Too short', email: 'Invalid email' }

setFieldError handler

form.setFieldError handler sets error of the given field:

import { useForm } from '@mantine/form';

const form = useForm({ initialValues: { name: '', email: '' } });
form.setFieldError('email', 'Invalid email');

form.errors; // -> { email: 'Invalid email' }

clearErrors handler

form.clearErrors handler clear all form errors:

import { useForm } from '@mantine/form';

const form = useForm({ initialErrors: { name: 'Too short', email: 'Invalid email' } });
form.clearErrors();

console.log(form.errors);
// -> {}

clearFieldError handler

form.clearFieldError handler clears error of the given field:

import { useForm } from '@mantine/form';

const form = useForm({ initialErrors: { name: 'Too short', email: 'Invalid email' } });
form.clearFieldError('name');

console.log(form.errors);
// -> { email: 'Invalid email' }

Errors as react node

You can use any React node as an error message:

import { useForm } from '@mantine/form';

const form = useForm({
  initialValues: { name: '', email: '' },
  initialErrors: {
    name: <p>Paragraph error</p>, // -> error as a react element
    email: 42, // -> error as a number
  },
});

Note that errors that are false, null or undefined will be automatically removed:

import { useForm } from '@mantine/form';

const form = useForm({ initialErrors: { name: 'name-error', email: null } });
form.errors; // -> { name: 'name-error' }, email error is not included in errors object

FormErrors type

form.errors type is Record<string, React.ReactNode>, you can import a shorthand FormErrors type from @mantine/form:

import type { FormErrors } from '@mantine/form';

You can also get type directly from the form instance:

import { useForm } from '@mantine/form';

const form = useForm();

const handleErrors = (errors: typeof form.errors) => {};