I’m currently looking for a way to check the format of a number.
I want to accept only conventional decimals such as: { 1 ; 1.1 ; 1.01 ; 15 ; 15.15}.
Currently in my text box I can pass numbers like for example: 102.129.392.12 (like an ip adress indeed) etc...
I had thought to put a regex to check that the format is good:
. .match(/^\d+(\.\d{1,2})?$/)
but I don’t know how to implement it in a .tsx file
I’m new to react's technology.
Here's my code.
const SupplyEvent = () => {
const handleChangeQuantity = (value: string) => {
if (chosenSupply) {
setChosenSupply({
...chosenSupply,
quantity: value.replace(/,/g, '.'),
// .match(/^\d+(\.\d{1,2})?$/)
});
}
};
return(
<View style={styles.halfWidth}>
<Input
value={chosenSupply?.quantity}
keyboardType="decimal-pad"
onChangeText={handleChangeQuantity}
disabled={mode === FormMode.read}
/>
</View>
);
};
I want to add a message in red for the user like 'This number is not accepted'
Do you guys have any ideas ?
Thanks you
...
import React, { useState } from 'react';
import { Text, StyleSheet } from 'react-native';
const SupplyEvent = () => {
const [error, setError] = useState(null);
const handleChangeQuantity = (value: string) => {
const resolveValue = value.replace(/,/g, '.');
if(!resolveValue.match(/^\d+(\.\d{1,2})?$/)){
setError("Format isn't correct");
}
else if (chosenSupply) {
setChosenSupply((prevChosenSupply)=>({
...prevChosenSupply,
quantity: resolveValue
}));
}
};
return(
<View style={styles.halfWidth}>
{error && <Text style={styles.errorMessage}>{error}</Text>}
<Input
value={chosenSupply?.quantity}
keyboardType="decimal-pad"
onChangeText={handleChangeQuantity}
disabled={mode === FormMode.read}
/>
</View>
);
};
const styles = StyleSheet.create({
...
errorMessage: {
color: 'white',
backgroundColor: 'red',
borderRadius: 5
}
});