React-hook-form условная проверка текстового поля в зависимости от того, установлен ли другой флажок?

Я пытаюсь добавить правило проверки в текстовое поле, где, если установлен отдельный флажок в форме, поле должно быть непустой строкой для отправки формы.

Вот ссылка на то, что у меня есть: https://codesandbox.io/s/magical-hypatia-n7o5w

Мне нужен последний ввод текста в форме ("tiger_type"), чтобы требовать ввода значения, только если установлен флажок ввода с идентификатором 'tiger'.

Я новичок, чтобы реагировать и реагировать на крючки, поэтому любые указатели будут оценены. Заранее спасибо.


reactjs validation react-hook-form
person SilentDesigns    schedule 02.03.2020    source источник
comment
Если вам нужна условная проверка, я бы рекомендовал использовать функцию проверки в сочетании с API getValues.   -  person Bill    schedule 06.03.2020

Ответы (1)


arrow_upward
2
arrow_downward

Используйте объект проверки функций обратного вызова, который предоставляет react-hook-form. Полностью рабочее решение https://codesandbox.io/s/nifty-khorana-ghzyy?file=/src/App.js

import { useForm } from 'react-hook-form';
// ... your component implementation 
const { getValues, getValues } = useForm(); 

return (
  <form onSubmit={handleSubmit}>
    <input ref={register} name="username" />
    <input
      ref={register({
        validate: {
          required: value => {
            if (!value && getValues('username')) return 'Required when username is provided';
            return true;
          },
        },
      })}
      name="email"
      type="text"
    />
 </form>
);

Примечание: на момент написания эти решения поддерживаются v5 и v6 формы response-hook-form https://react-hook-form.com/api#register

person Stefan J    schedule 14.12.2020
comment
Какое решение для контроллера? - person thodwris; 15.01.2021
comment
@thodwris Передает содержимое объекта validate в свойство rule Контроллера - person Stefan J; 18.01.2021