ReactJS set min and max value for number input using final-form-material-ui

Question

I'm using final-form and final-form-material-ui

I want to set min and max values for number inputs. Already tried

InputProps={{ inputProps: { min: 0, max: 10 } }}

but it doesn't work.

Also I want to add seconds for preparation_time so the format would be 00:00:00.

codesandbox https://codesandbox.io/s/fast-brook-g3488?file=/src/App.js

Answer 1

using the documentation: https://final-form.org/docs/react-final-form/examples/field-level-validation

sandbox demo: https://codesandbox.io/s/wizardly-paper-2dtwf?file=/src/App.js:3139-3391

write your validation in this way:

const minValue = (min) => (value) =>
  isNaN(value) || value >= min ? undefined : `Should be greater than ${min}`;

const composeValidators = (...validators) => (value) =>
  validators.reduce((error, validator) => error || validator(value), undefined);

then use the validation in this way:

 <Field
       name="no_of_slices"
       component={TextField}
       type="number"
       validate={composeValidators(minValue(18))}
       label="Number of slices"
       />