Redux Form: Validate NumberInput with argument from component props

Question

I am using Redux-Form v.7.3.0 and I want to validate a NumberInput Field with a number that is stored in the state and also in props of my component that holds that Field.

This is my Field:

<Field
   name={MyCompononent.stackabilityName}
   component={NumberInput}
   validate={checkIfInsertedValueIsSmallerThan(this.props.stackability)}
   normalize={notNegativeAndToInteger}
/>

And I want to have something like in the documentation here Field Validation Documentation

This is the interesting part:

const minValue = min => value => value && value < min ? `Must be at least ${min}` : undefined

Where this is used like this inside the "validate" prop of my Field: minValue(5). I dont want to achieve this. I want to pull something from the state/props of my component where the Field component is located in order to dynamically insert the minimum value.

I hope there is some elegant way to do this. Thanks for your help!

sudo sudo · Accepted Answer · 2019-01-07T22:10:00

As mentioned in the documentation, when you pass a function to your validate prop of the <Field> component, this function receives the following parameters:

customValidator(value, allValues, props, name)
// value: The current value of the field
// allValues: The values of the entire form
// props: Any props passed to the form
// name: Field name provided

So in your case you can just do this:

<Field
   name={MyCompononent.stackabilityName}
   component={NumberInput}
   validate={checkIfInsertedValueIsSmallerThan}
   normalize={notNegativeAndToInteger}
/>

const checkIfInsertedValueIsSmallerThan = (value, allValues, props, name) => {
   const stackability = props.stackability;
   // do something...
   return error;
}

Redux Form: Validate NumberInput with argument from component props

1 Answers