React Hook Form Controller实现复选框驱动的日期输入条件必填验证问题

核心修改点 #

1. 动态控制必填规则：通过watch监听复选框状态，给日期输入框的Controller设置动态required校验规则
2. 同步表单组件的必填标记：修改InputWrapper的required属性，和复选框状态联动
3. 可选优化：清空无效值：勾选复选框时自动清空日期输入框，避免提交无效数据

修改后的完整代码 #

import { useEffect } from 'react';
import { Controller, useForm, watch } from 'react-hook-form';

const YourFormComponent = () => {
  const { control, errors, reset, formState: { isDisabled: isFormDisabled } } = useForm();
  // 监听"永不失效"复选框的状态
  const neverExpired = watch('neverExpired');

  // 可选优化：勾选复选框时自动清空日期输入框
  useEffect(() => {
    if (neverExpired) {
      reset({ expirationDate: '' });
    }
  }, [neverExpired, reset]);

  return (
    <div className='flex items-center gap-8'>
      <InputWrapper
        hasError={!!errors.expirationDate?.message}
        errorMessage={errors.expirationDate?.message}
        // 未勾选复选框时显示必填标记
        required={!neverExpired}
        label='تاریخ انقضا'
        disabled={isFormDisabled || neverExpired}>
        <Controller
          name="expirationDate"
          control={control}
          rules={{
            // 动态必填规则：未勾选复选框时，日期为必填项
            required: neverExpired ? false : {
              value: true,
              message: 'تاریخ انقضا الزامی است' // 自定义错误提示文案
            }
          }}
          render={({ field }) => (
            <CustomizedDatePicker
              value={field.value}
              minDate={new Date()}
              name='expirationDate'
              onChange={(date: DateObject) => {
                field.onChange(date ? date.unix * 1000 : '');
              }}
              disabled={isFormDisabled || neverExpired}
            />
          )}
        />
      </InputWrapper>

      <InputWrapper
        labelBesideInput
        hasError={!!errors.neverExpired}
        label="هرگز منقضی نشود"
        id={'neverExpireCheck'}
        className={'pt-6'}
        disabled={isFormDisabled}
      >
        <Controller
          name="neverExpired"
          control={control}
          render={({ field }) => (
            <Checkbox
              inputId={field.name}
              onChange={(e) => field.onChange(e.checked)}
              checked={field.value}
              disabled={isFormDisabled}
            />
          )}
        />
      </InputWrapper>
    </div>
  );
};

补充说明 #

如果需要更实时地获取表单最新值（比如表单值可能被其他逻辑修改），可以将required写成函数形式，直接获取整个表单的状态：

rules={{
  required: (_, formValues) => {
    if (!formValues.neverExpired && !_.value) {
      return 'تاریخ انقضا الزامی است';
    }
    return true;
  }
}}

内容的提问来源于stack exchange，提问作者Ali Ehyaie