Redux Array Shape Validation
I am using Redux form module for all forms in a project. I want to create a validation based on a props of a component. Each row has a table with some fields.
Table
The first field is a dropdown menu with all the products that come from the store. Each product has an available count, and if the number of fields is greater than the available count, the Redux form should return an error for a specific line. I cannot do this in the validate function that is passed in the method reduxForm
:
reduxForm({
validate,
form: 'theNameOfTheForm'
})
The reason why I cannot validate the table in the function validate
is because it cannot see the current props of the component (I haven't found a way how I can do this). I decided to pass the function validate
as a prop for the component FieldArray
:
// some methods
validate(values) {
// some validation code
}
render() {
return (
<FieldArray validate={this.validate} />
)
}
From the method, validate
I can access the props of the component, but no matter how I return from that method, no error was received with the field
prop in the component passed as component
prop in <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 }) => {};
How can I check? Am I doing something wrong? Is there any other way how I can do the validation?
source to share
You can pass the component props to the validation function when using HOC (Higher Order Components) and do the validation in the main validation function (no need to create a method in the component and then pass it to the FieldArray component). Just export the component like this:
export default connect(
mapStateToProps,
mapDispatchToProps
)(
reduxForm({
validate,
form: 'ExampleForm'
})(ExampleForm)
);
The component props are passed to the validation function as the second parameter:
const validate = (values, props) => {
const errors = {};
return errors;
};
source to share