如何使用Yup实现Formik FieldArray嵌套对象数组的前后项依赖校验
你可以通过给Yup.array()追加自定义test校验方法实现跨项依赖校验,具体实现逻辑如下:
在校验函数中遍历整个variablePrice数组,从第二项开始逐一比对当前项的orderMin和前一项的orderMax,不符合规则就抛出对应位置的错误即可,完整校验代码如下:
variablePrice: Yup.array() .of( Yup.object().shape({ orderMin: Yup.number() .required("orderMin Value is required") .positive("orderMin Value can only be a positive number") .min(0, "orderMin Value can not be a negative number"), orderMax: Yup.number() .required("orderMax Value is required") .positive("orderMax Value can only be a positive number") .moreThan(Yup.ref("orderMin"), "orderMax Value must be higher than the orderMin Value"), price: Yup.number() .required("Price is required") .positive("price can only be a positive number") .min(0.01, "Price must be above 0"), }) ) // 新增跨项依赖校验 .test( 'order-sequence-check', '后一项的最小起订量必须大于前一项的最大起订量', function (value) { // 数组为空或者只有1项时直接跳过校验 if (!value || value.length <= 1) return true; // 遍历校验每一项和前一项的关系 for (let i = 1; i < value.length; i++) { const prevItem = value[i - 1]; const currentItem = value[i]; // 只要有一项不符合就抛出错误,指定错误路径方便Formik定位到对应字段 if (currentItem.orderMin <= prevItem.orderMax) { return this.createError({ path: `variablePrice[${i}].orderMin`, message: `当前最小起订量必须大于上一项的最大起订量(${prevItem.orderMax})` }); } } return true; } )
该实现和你原有单字段校验的报错逻辑完全兼容,不符合规则的那一项的orderMin字段会直接显示对应的错误提示。
内容的提问来源于stack exchange,提问作者George Alexopoulos
相关产品推荐
相关产品推荐

