'React Number format does not allow to range validation
Requirement is I need to take a input from user for weight, which will be in a range between 3 to 21 weight, for max-limit I am able to achieve it, but for 0,1,2 what should I do .
<Form.Group className="num-group">
<NumberFormat
className="form-control"
allowNegative={false}
value={Number(
comment.weight
)}
isAllowed={checkLength}
onValueChange={(e) =>
handleValueChange(
e,
index,
"weight"
)
}
/>
</Form.Group>
const checkLength = (inputObj) => {
const { value, floatValue, formattedValue } = inputObj;
console.log(inputObj);
if (value <= 20) return true;
return false;
};
const handleValueChange = (e, index, name) => {
console.log(e.value);
let result = Number(e.value.length) <= 2;
if (result) {
const tempData = [...data];
tempData[index] = { ...tempData[index], [`${name}`]: Number(e.value) };
setData(tempData);
}
};
What I need to achieve is, user is suppose to edit field, should only take values between 3-21 values.
Currently as per onValueChange Function when I do Backspace to change the value, it become zero that is expected result , but I need only user type 3-21 values.
If write logic value >=3 && value <=20, in this is case it is not allowing me change as it works on ONchange and take only one value at time.
for example if number is 3 and I need to make it 4, so it will not allow me to do so if I write range logic.
Because it when we edit first it became zero and then we will enter details.
Please suggest what should I do ?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
