javascript 基于其他字段的React-Hook-Form条件要求验证

deikduxw  于 2023-01-11  发布在  Java
关注(0)|答案(1)|浏览(171)

我有一个使用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提前为任何努力

dced5bon

dced5bon1#

最好的方法是使用Zodyup之类的验证模式,并且可以通过watch('neverExpired')的值来操作模式。

相关问题