react-component / form

React High Order Form Component(web & react-native)
http://react-component.github.io/form/
MIT License
1.81k stars 296 forks source link

validateFieldsInternal 校验错位 #286

Open lich-yoo opened 5 years ago

lich-yoo commented 5 years ago

createDOMForm.js 中的 validateFieldsInternal 函数在校验规则中 存在 type: 'array' 与 特定 prop 时,会出现检验信息不对应的情况。

示例代码地址:https://codesandbox.io/s/6l57rkxoyz

debug 发现出错位置大约在下面部分 `

            var restPath = errorFieldName.slice(ruleFieldName.length + 1);

            if (/\d+/.test(restPath)) {
              fieldName = ruleFieldName;
              return true;
            }

`

我是在 antd 中引用的 Form 组件,在修复之前我该以什么样的方式绕过这个问题呢? 不用 type array 检验?

xingangsun commented 5 years ago

createDOMForm.js 中的 validateFieldsInternal 函数在校验规则中 存在 type: 'array' 与 特定 prop 时,会出现检验信息不对应的情况。

示例代码地址:https://codesandbox.io/s/6l57rkxoyz

debug 发现出错位置大约在下面部分 `

            var restPath = errorFieldName.slice(ruleFieldName.length + 1);

            if (/\d+/.test(restPath)) {
              fieldName = ruleFieldName;
              return true;
            }

`

我是在 antd 中引用的 Form 组件,在修复之前我该以什么样的方式绕过这个问题呢? 不用 type array 检验?

我也发现了这个问题。我临时的解决办法是不要写type array,如果表单值是数组类型就手动写函数校验

{getFieldDecorator('absoluteTime', {
  initialValue: [],
  validateFirst: true,
  rules: [
    (rule, val, callback) => {
      if (!val || !Array.isArray(val) || !val.length) {
        callback('请选择绝对时间');
        return;
      }
      callback();
    },
  ],
})((
  <DatePicker.RangePicker />
))}