Throw form errors

Modular Forms has built-in error handling with the FormError class to easily display individual errors when submitting a form.

Throw general error

General errors are errors that affect the entire form and can be displayed via the response state in the UI, e.g. above the submit button.

Client-side errors

When processing the form client-side via the onSubmit event listener, any error thrown is automatically caught and added to the response state.

To throw custom errors to be displayed to the user, you can use our FormError class. It inherits from the default Error class and can contain a general error message as well as error messages for individual fields. More about this in a moment.

import { FormError, SubmitHandler, useForm } from '@modular-forms/react';

type LoginForm = {
  email: string;
  password: string;
};

export default function App() {
  const [loginForm, { Form, Field }] = useForm<LoginForm>();

  const handleSubmit: SubmitHandler<LoginForm> = (values, event) => {
    if (error) {
      throw new FormError<LoginForm>('An error has occurred.');
    }
  };

  return (
    <Form onSubmit={handleSubmit}>
      <div>…</div>
      <div>{loginForm.response.message}</div>
      <button type="submit">Login</button>
    </Form>
  );
}

Throw field error

Field errors are errors that are assigned to a specific field and added to its state. In addition to a general error message, you can also add an error message to specific fields using the second argument of the FormError class constructor.

if (error) {
  throw new FormError<LoginForm>('An error has occurred.', {
    email: 'This email has been blacklisted.',
  });
}

Field errors only

To not display a general error message and instead display only errors of individual fields, you can simply omit the general message.

if (error) {
  throw new FormError<LoginForm>({
    email: 'This email has been blacklisted.',
  });
}