Для решения данной проблемы вы можете использовать условия валидационной схемы, которые будут базироваться на выбранной радиокнопке.
Вот пример кода, который демонстрирует, как это можно реализовать:
```javascript
import React from "react";
import { useForm } from "react-hook-form";
import { object, string, number, when, ref } from "yup";
const schema = object().shape({
type: string().required(),
// Добавьте остальные поля формы, в зависимости от типа клиента
// Пример:
firstName: when("type", {
is: "individual",
then: string().required(),
otherwise: string(),
}),
companyName: when("type", {
is: "company",
then: string().required(),
otherwise: string(),
}),
// ... Добавьте остальные поля в зависимости от типа клиента
});
const Form = () => {
const { register, handleSubmit, errors, watch } = useForm({
validationSchema: schema,
});
const selectedType = watch("type"); // Получение значения выбранного типа
const onSubmit = (data) => {
console.log(data);
// Выполнить отправку данных формы
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<div>
<label>
<input type="radio" value="individual" name="type" ref={register} />
Individual
</label>
<label>
<input type="radio" value="company" name="type" ref={register} />
Company
</label>
</div>
{selectedType === "individual" && <IndividualFields register={register} errors={errors} />}
{selectedType === "company" && <CompanyFields register={register} errors={errors} />}
{/* Вывод сообщений об ошибках */}
{errors && errors.type && <span>{errors.type.message}</span>}
{selectedType === "individual" && errors && errors.firstName && <span>{errors.firstName.message}</span>}
{selectedType === "company" && errors && errors.companyName && <span>{errors.companyName.message}</span>}
{/* Кнопка отправки формы */}
<input type="submit" value="Submit" />
</form>
);
};
const IndividualFields = ({ register, errors }) => {
return (
<div>
<input type="text" name="firstName" placeholder="First Name" ref={register} />
{errors && errors.firstName && <span>{errors.firstName.message}</span>}
{/* Добавьте остальные поля для физического лица */}
</div>
);
};
const CompanyFields = ({ register, errors }) => {
return (
<div>
<input type="text" name="companyName" placeholder="Company Name" ref={register} />
{errors && errors.companyName && <span>{errors.companyName.message}</span>}
{/* Добавьте остальные поля для юридического лица */}
</div>
);
};
```
Код включает в себя две отдельные компоненты для каждого типа клиента, которые будут отображаться в зависимости от выбранной радиокнопки. Также, в коде используется библиотека `yup` для создания валидационной схемы.
Обратите внимание, что для отображения сообщений об ошибках необходимо включить соответствующие проверки ошибок для каждого поля в зависимости от выбранного типа клиента. В приведенном примере используется условный рендеринг для этого.