0

I have a TextField with some validation i need:

minValue = 1

maxValue = 10

These validations work if I use arrows from TextField, but if I type directly into it, I could type any number. How would i fix/validate this

<TextField
    label="Selectati nota"
    type="number"
    id={subject._id}
    value={subject.gradeData.grade}
    onChange={(ev) => updateGrade(ev)}
    disabled={loading}
    size="small"
    InputLabelProps={{style: {fontSize: 18, color:"#3F51B5"}}}
    InputProps={{
        style: {
            fontSize:18, fontWeight:"bold"
        },
        inputProps: {
            min: 1,
            max: 10,
            maxLength: 2,
            //   pattern: "^[1-9]d*$",
        },
     }}
     style={{ width: 150, marginLeft: 10 }}
     variant="filled"/>
MiRAY
  • 188
  • 2
  • 15

2 Answers2

0

Does this work? added step

<TextField type="number" inputProps={{ min: "1", max: "10", step: "1" }} />

And if that's not working try to check it in the onChange function

Daniel Bellmas
  • 589
  • 5
  • 17
-1

Try changing the onChange function:

<TextField
  // other props
  onChange={handleChange}
/>

onChange function:

const handleChange = e => {
  setState(prev => {
    if (e.target.value < min || e.target.value > max) {
      return prev;
    }
    return e.target.value;
  })
}
Abhishek
  • 104
  • 5
  • Thanks, but apparently i have to make a custom component. If anyone would be interested, here is a related topic: https://stackoverflow.com/questions/45758998/how-can-i-mask-my-material-ui-textfield – MiRAY Jun 14 '21 at 20:38