基於是否選中另一個復選框，文本字段的 React-hook-form 條件驗證？

Question

我正在嘗試向文本字段添加驗證規則，如果選中表單中的單獨復選框，則該字段必須是非空字符串才能提交表單。

這是我到目前為止所擁有的鏈接： https : //codesandbox.io/s/magical-hypatia-n7o5w

我需要表單（“tiger_type”）中的最終文本輸入，以便僅在選中帶有 id 'tiger' 的復選框輸入時才需要輸入值。

我是 react 和 react-hooks-form 的新手，因此將不勝感激。 提前致謝。

Answer 1

使用react-hook-form提供的回調函數的驗證對象。 完全有效的解決方案https://codesandbox.io/s/admiring-morning-ljnvk?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>
);

注意：在撰寫本文時，react-hook-form https://react-hook-form.com/api#register 的v5 和 v6 支持此解決方案