Redux 表单字段数组验证

Question

我正在为项目中的所有表单使用 Redux 表单模块。我想基于组件道具创建验证。每行都有一个 table 和一些字段。 The table 第一个字段是一个下拉列表，其中包含来自商店的所有产品。每个产品都有一个可用数量，如果字段数量大于可用数量，Redux 表单应该 return 特定行的错误。我无法在 reduxForm 方法中传递的验证函数中执行此操作：

reduxForm({
  validate,
  form: 'theNameOfTheForm'
})

之所以不能在validate函数中做table校验是因为它看不到组件当前的props（我没找到方法我可以做到）。我决定将 validate 函数作为 prop 传递给 FieldArray 组件：

// some methods

validate(values) {
    // some validation code
}

render() {
    return (
        <FieldArray validate={this.validate} />
    )
}

从 validate 方法我可以访问组件道具但是无论我从这个方法 return 什么错误都没有被组件中的 field 道具接收到作为 component 支持 <FieldArray />.

return 'Some error message';

return ['Some error message'];

return {
    products: 'Some error message'
};

return {
    products: ['Some error message']
};

<FieldArray validate={this.validate} component={FieldArrayComponent} />

const FieldArrayComponent = ({ field, meta }) => {};

我如何进行验证？难道我做错了什么？还有其他方法可以进行验证吗？

Answer 1

你可以在使用 HOC（高阶组件）时将组件 props 传递给验证函数，并在主要验证函数中进行验证（无需在组件中创建方法，然后将其传递给 FieldArray 组件).只需像这样导出组件：

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(
  reduxForm({
    validate,
    form: 'ExampleForm'
  })(ExampleForm)
);

组件道具作为第二个参数传入验证函数：

const validate = (values, props) => {
  const errors = {};

  return errors;
};

Redux 表单字段数组验证

Redux Form Field Array Validation

reactjs

redux

redux-form