Errors - Mantine — ContextQMD

import { FormDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.formErrors);

Errors object

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

tsx

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

const form = useForm({
  mode: 'uncontrolled',
  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,
  },
});

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

// Errors will be filled when you call form.validate manually
// or automatically with the form.onSubmit handler
await 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:

tsx

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

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

setErrors handler

tsx

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

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

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

setFieldError handler

The form.setFieldError handler sets the error for the given field:

tsx

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

const form = useForm({
  mode: 'uncontrolled',
  initialValues: { name: '', email: '' },
});

form.setFieldError('email', 'Invalid email');

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

clearErrors handler

The form.clearErrors handler clears all form errors:

tsx

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

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

form.clearErrors();

form.errors; // -> {}

clearFieldError handler

The form.clearFieldError handler clears the error for the given field:

tsx

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

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

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

Errors as React node

You can use any React node as an error message:

tsx

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

const form = useForm({
  mode: 'uncontrolled',
  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:

tsx

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

const form = useForm({
  mode: 'uncontrolled',
  initialErrors: { name: 'name-error', email: null },
});

form.errors; // -> { name: 'name-error' }, email error is not included in the errors object

FormErrors type

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

tsx

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

You can also get the type directly from the form instance:

tsx

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

const form = useForm({ mode: 'uncontrolled' });

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