Estoy usando React Hook Form para ingresar la altura, el peso y la longitud. El valor no puede ser 0, tiene que ser al menos 1 o más. Probé diferentes formas, como: patrón con expresiones regulares, validar y más. Pero no puedo averiguar cómo evitar que el campo de entrada permita que el usuario escriba '0' (solo como el primer carácter). También probé type="number" y min="1", sin embargo, no cambia nada. Cualquier idea sería muy apreciada.
<Input
{...form.register(`pallets.${index}.weight`, {
required: t('errors.emptyInput'),
pattern: {
value: /^[^1-9]/,
message: 'hello',
},
validate: (value) => {
return [/^[^1-9]/].every((pattern) => pattern.test(value))
},
})}
type='number'
/>
Me parece que el pattern no cambia nada. Solo type= 'number' en realidad afecta la forma en que funciona el campo de entrada.
<input
type="number"
{...register("test", {
min: 1
})}
/>
Puede consultar el uso detallado en la documentación .
Puede aprovechar el gancho de useState de reacción para implementar esta funcionalidad.
export default function App() {
const [x, setX] = useState(null);
const handleChange = e => {
const value = e.target.value;
if (!value || /^[1-9]\d*/.test(value))
setX(e.target.value)
}
return (
<div className="App">
<input type="number" value={x} onChange={handleChange} />
</div>
);
}