我有一个使用nextjs和typescript的项目,在这个项目中,我使用react-hook-form来处理我的表单。在我的一个表单中,我有一个复选框,如果该复选框被选中,日期输入应该被禁用和不需要,否则日期输入应该是必需的。我看到了这个解决方案
React-hook-form conditional validation of text field, based on if another checkbox is checked?
但我使用控制器方法,我不能将函数传递到required中,这是我的输入
<div className='flex items-center gap-8'>
<InputWrapper
hasError={!!errors.expirationDate?.message}
errorMessage={errors.expirationDate?.message}
required
label='تاریخ انقضا'
disabled={isFormDisabled || watch('neverExpired')}>
<Controller
name="expirationDate"
control={control}
rules={{
required: {}
}}
render={({field}) => (
<CustomizedDatePicker
value={field.value}
minDate={new Date()}
name='expirationDate'
onChange={(date: DateObject) => {
field.onChange(date ? date.unix * 1000 : '');
}}
disabled={isFormDisabled || watch('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>
tnx提前为任何努力
1条答案
按热度按时间dced5bon1#
最好的方法是使用Zod或yup之类的验证模式,并且可以通过
watch('neverExpired')
的值来操作模式。