我在React中有一个表单,可以动态添加/删除最小/最大输入。我正在尝试验证每一行,在我的inputMin
模式中,inputMax
小于react hook form
,而yup
则较小。仅当两个输入字段都不为空时才应用验证。
const validationSchema = yup.object().shape({
inputMin: yup
.when("inputMax", {
is: v => v > 0,
then: number().lessThan(ref("inputMax"), "Min should be less than Max")
})
});
const { register, triggerValidation } = useForm({ validationSchema });
React组件中由用户动态添加/删除的HTML:
<input name="inputMin" type="number" ref={register} />
<input name="inputMax" type="number" ref={register} />
当最大/最小行只有一行时,此功能有效。但是当有2行时,验证效果不佳。
MIN MAX
ROW1 : 0 5
ROW2 : 9 5 <-- (the triggerValidation doesn't catch this error)
如何告诉它正确地对每一行的同级inputMin
验证inputMax
?