Form errors

Manipulate form errors with use-form

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) => {};