Form 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'
// }

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

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

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

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

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

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

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

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

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

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

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

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' }

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
  },
});

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

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

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

const form = useForm();

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