Как лучше сделать валидацию сложных форм react-hook-form + yup?

Для реализации валидации сложных форм в React с использованием библиотеки react-hook-form и yup, можно воспользоваться следующим подходом.

1. Установка необходимых пакетов:
Начнем с установки react-hook-form и yup:

   npm install react-hook-form yup

2. Создание формы:
Сначала создайте компонент формы и импортируйте необходимые зависимости:

   import React from "react";
   import { useForm } from "react-hook-form";
   import { yupResolver } from "@hookform/resolvers/yup";
   import * as yup from "yup";

   const Form = () => {
     const validationSchema = yup.object().shape({
       name: yup.string().required("Name is required"),
       email: yup.string().email("Invalid email").required("Email is required"),
       password: yup
         .string()
         .min(6, "Password must be at least 6 characters")
         .required("Password is required"),
     });

     const {
       handleSubmit,
       register,
       formState: { errors },
     } = useForm({
       resolver: yupResolver(validationSchema),
     });

     const onSubmit = (data) => {
       console.log(data);
     };

     return (
       <form onSubmit={handleSubmit(onSubmit)}>
         <div>
           <label>Name:</label>
           <input {...register("name")} />
           {errors.name && <p>{errors.name.message}</p>}
         </div>
         <div>
           <label>Email:</label>
           <input {...register("email")} />
           {errors.email && <p>{errors.email.message}</p>}
         </div>
         <div>
           <label>Password:</label>
           <input type="password" {...register("password")} />
           {errors.password && <p>{errors.password.message}</p>}
         </div>
         <button type="submit">Submit</button>
       </form>
     );
   };

   export default Form;

3. Включение валидации и обработка ошибок:
В приведенном выше примере мы создали объект validationSchema, который содержит определение правил валидации для каждого поля формы. Потом мы передаем этот объект в useForm с помощью yupResolver.

Во время рендеринга компонента мы используем register из react-hook-form для регистрации каждого поля формы. Мы также проверяем наличие ошибок для каждого поля и отображаем соответствующее сообщение об ошибке при наличии.

При отправке формы указываем функцию обратного вызова onSubmit, которая будет вызываться при успешной валидации формы. В этой функции можно выполнять любую логику, например, отправлять данные на сервер.

4. Использование формы:
Чтобы использовать компонент формы, просто добавьте его в другой компонент:

   import React from "react";
   import Form from "./Form";

   const App = () => {
     return (
       <div>
         <h1>Form</h1>
         <Form />
       </div>
     );
   };

   export default App;

Теперь вы имеете полностью функциональную форму с валидацией, используя react-hook-form и yup. При отправке формы будут выполняться все правила валидации из validationSchema, и соответствующие ошибки будут отображаться под каждым полем формы.

Этот подход предоставляет гибкую и мощную систему валидации форм с использованием react-hook-form и yup. Он позволяет создавать сложные и динамичные формы с различными правилами и сообщениями об ошибках.