【antd】form表单如何校验区间值

需求:我们需要在表单中填写两个数值,一个最大值一个最小值,但是我们需要在填写的时候去校验最大值和最小值的关系,最大值不能小于最小值,最小值不能大于最大值.如下

解决方案:

    //最小值校验     

               rules={[
                        {
                          required: true,
                          message: '请需填写完整',
                        },
                        {
                          validator: (rule, value, callback) => {
                            let maxPrice = form.getFieldValue('maxPrice'); //拿到最大值
                            if (value > maxPrice) {
                              callback(`不能大于${maxPrice}`);
                            } else {
                              callback();
                            }
                          },
                        },

 这里有个问题,即当我最小值已经报错了,但是我不去修改最小值而是去修改最大值,即使满足条件了,最小值的报错还在,校验效果不会更新,如下我先最大值填4,最小值填5,则最小值显示"不能大于4",这时候我再把最大值改成6,这个报错不会消失

 解决方案2:

    报错之后更新一下校验

                      rules={[
                        {
                          required: true,
                          message: '请需填写完整',
                        },
                        {
                          validator: (rule, value, callback) => {
                            let maxPrice = form.getFieldValue('maxPrice');
                            if (value > maxPrice) {
                              callback(`不能大于${maxPrice}`);
                              form.validateFields(['maxPrice']);
                            } else {
                              form.validateFields(['maxPrice']);
                              callback();
                            }
                          },
                        },
                      ]}

但是这同样也有个问题,就是他们会同时报错,同时取消报错.

完整代码

                    {
                            let maxPrice = form.getFieldValue('maxPrice');
                            if (value > maxPrice) {
                              callback(`不能大于${maxPrice}`);
                              form.validateFields(['maxPrice']);
                            } else {
                              form.validateFields(['maxPrice']);
                              callback();
                            }
                          },
                        },
                      ]}
                    >
                      
                    
                     {
                            let minPrice = form.getFieldValue('minPrice');
                            if (value < minPrice) {
                              callback(`不能小于${minPrice}`);
                              form.validateFields(['minPrice']);
                            } else {
                              form.validateFields(['minPrice']);
                              callback();
                            }
                          },
                        },
                      ]}
                    >