react-hook-form controller，基於值進行驗證

Question

我正在使用 react-hook-form 庫並有一個 controller 用於日期選擇器

根據文檔，規則應該與寄存器內的驗證集完全一樣。

它適用於{ required: true } ，但是當需要考慮字段中的值時，我似乎無法觸發錯誤。

出於我的目的，我有一個 function 將日期從 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>

嘗試使用 controller 是這樣的。