antd 如何清除表单验证（联动表单验证）

前言提示，antd官网的文档说明怎么样看参数？其实是参考的typeScript的规则写法：

当我们使用antd的Form表单时，可能会遇到2个表单联动的情况，试想一下以下场景：

antd 如何清除表单验证（联动表单验证）

投标利率我们设置在（3%-7%）以内，也就是说，输入框不能取值范围是3-7，当投标状态是“投标”（共三种）时，该投标利率表单验证生效，如果选择其他状态，则不生效，如果原本已有验证提示，需要清空原本的验证

antd 如何清除表单验证（联动表单验证）

那么，如何清除表单验证？清除表单验证antd提供了1个api（resetFields）：

// 众所周知，antd的Form组件必须经过Create才能找到this.props.form属性，在此不再展开

// export default Form.create()(ProjInfoForm)

使用以下两句解决问题：

// 重置表单tenderStatus属性的值以及表单验证提示（值会变成initialValue的值）

this.props.form.resetFields(['tenderStatus']);

// 将我们重置之前储存好的属性值，给联动表单的属性重新赋值，否则会变成initialValue的值

this.props.form.setFieldsValue({ tenderStatus: status });

完整代码如下：

<FormItem>

                      {getFieldDecorator(postField || dataIndex, {

                        initialValue: tenderRate,

                        rules: [

                          {

                            validator: (rule, value, callback) => {

                              if (prdApplySection1 === 0 && prdApplySection2 === 0) {

                                callback()

                                return

                              }

                              // console.log('this.props.form.getFieldsValue()', this.props.form.getFieldsValue())

                              const status = this.props.form.getFieldsValue().tenderStatus;

                              if (+status === 2) {

                                if (+value < +prdApplySection1 || +value > +prdApplySection2) {

                                  callback(`不在申购区间内，申购区间：${prdApplySection1}%~${prdApplySection2}%, 或者将投标状态改为”意向”`)

                                } else {

                                  this.props.form.resetFields(['tenderStatus']);

                                  this.props.form.setFieldsValue({ tenderStatus: status });

                                  callback();

                                }

                              }

                              callback()

                            }

                          },

                          { required: true, message: `请输入${title}` }

                        ],

                      })(

                        <InputNumber

                          disabled={sessionStorage['scaleType'] == '0'}

                          placeholder="投标单位"

                          //formatter={value => `${value}${sessionStorage['unit']}`}

                          //parse={value => value.replace(/(%|bp|元)*/g, '')}

                          style={{ width: "100%" }}

                          max={100}

                          min={0}

                        />

                      )}

</FormItem>

antd 如何清除表单验证（联动表单验证）

相关推荐