Question

我正在使用react-hook-form库，并且有一个用于日期选择器的控制器

根据the documentation，规则应与寄存器内的验证设置完全相同。

它与{ required: true }一起使用，但是当需要考虑字段中的值时，我似乎无法触发错误。

出于我的目的，我有一个函数将日期从react-datepicker转换为YYYY-MM-DD，称为formatDate（即formatDate从日期选择器中获取值并返回一个字符串"YYYY-MM-DD"）

仅出于测试目的，如果值与YYYY-MM-DD形式的某个字符串不匹配，我将尝试触发错误

 <Controller
   as={<DatePicker />}       
   name="initialDate"
   control={control}      
   maxDate={dateRef.current}
   rules={{ validate: (value) => !value || formatDate(value) === '2020-07-12' }}
 />

该错误永远不会触发

编辑：经过一些测试，错误确实在提交表单时触发，但是，我将验证设置为在模糊时触发，这是不起作用的部分。还要注意，当我尝试{required：true}的错误时，它在模糊时触发而没有问题

  const { handleSubmit, control, watch, setValue, errors, register } = useForm({ mode: 'onBlur'});

Answer 1

试试useForm({mode:'onBlur'}) 来自 react-hook-form API 文档：useForm

Answer 2

const { handleSubmit, control } = useForm({
  mode: 'onChange',
  reValidateMode: 'onChange'
});

         <Controller
            control={control}
            defaultValue={''}
            render={({ onChange, onBlur }) => (
              <TextFeild
                name="name"
                required
                onChange={onChange}
                onBlur={onBlur}
                errorMessage={'ERORR!'}
              />
            )}
            rules={{
              required: true,
              minLength: 6,
            }}
            name="name"
          ></Controller>

尝试使用控制器是这样的。

反应挂钩形式的控制器，具有基于值的验证

2 个答案: