Error Handling

We recommend using yup to handle errors.

yarn add @hookform/resolvers yup

Here's a full example using yup as form validation:

import { Form, FormElement } from "@formatomus/core";
import { useForm } from "react-hook-form";
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from "yup";

const schema = yup.object({
  firstName: yup.string().required(),
  age: yup.number().positive().integer().required(),
}).required();

type FormData = yup.InferType<typeof schema>;

const Component = () => {
  const methods = useForm<FormData>({
    resolver: yupResolver(schema)
  });

  return (
    <Form methods={methods}>
      <FormElement name="firstName">
        <FormElement.Label>First Name</FormElement.Label>

        <FormElement.Input placeholder="First Name" />
        
        <FormElement.Error>{({ message }) => <p>{message}</p>}</FormElement.Error>
      </FormElement>

      <FormElement name="age">
        <FormElement.Label>Age</FormElement.Label>

        <FormElement.Input type="number" placeholder="Age" />

        <FormElement.Error>{({ message }) => <p>{message}</p>}</FormElement.Error>
      </FormElement>
    </Form>
  );
}

It's as simple as that 🥳