Как можно настроить в React Hook Form с Yup валидацию Input при изменении другого Input?

Как можно исправить валидацию для двух зависимых друг от друга полей, созданных с помощью библиотек yup и используемых вместе с react-hook-form?"
  • 4 августа 2024 г. 12:23
Ответы на вопрос 1
Для настройки валидации в React Hook Form с помощью Yup при изменении другого Input, можно использовать метод `validate()` из Yup, который позволяет проводить дополнительную валидацию при изменении поля. В данном случае можно задать валидацию для поля в зависимости от значения другого поля.

Пример:

```jsx
import React from 'react';
import { useForm, Controller } from 'react-hook-form';
import * as yup from 'yup';

const schema = yup.object().shape({
  firstName: yup.string().required('First name is required'),
  lastName: yup.string().required('Last name is required'),
});

const Form = () => {
  const { handleSubmit, control, errors } = useForm({
    resolver: yupResolver(schema),
  });

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="firstName"
        control={control}
        render={({ field }) => <input {...field} placeholder="First Name" />}
      />
      {errors.firstName && <p>{errors.firstName.message}</p>}

      <Controller
        name="lastName"
        control={control}
        render={({ field }) => <input {...field} placeholder="Last Name" />}
      />
      {errors.lastName && <p>{errors.lastName.message}</p>}
    </form>
  );
};

export default Form;
```

Чтобы исправить валидацию для двух зависимых друг от друга полей, можно воспользоваться методом `when()` из Yup, который позволяет задать условную валидацию. Например, если поле A зависит от значения поля B, можно задать валидацию для поля A с условием, что значение поля B соответствует определенному условию.

Пример:

```jsx
const schema = yup.object().shape({
  firstName: yup.string().required('First name is required').when('lastName', {
    is: (lastName) => lastName && lastName.length > 5,
    then: yup.string().min(5, 'First name must be at least 5 characters'),
  }),
  lastName: yup.string().required('Last name is required'),
});
``` 

В данном примере валидация для поля `firstName` зависит от значения поля `lastName`, и если длина `lastName` больше 5 символов, то применяется условное правило для `firstName`.
Похожие вопросы