0

Estoy aprendiendo a validar formularios con react-hook-form pero cuando pongo el ref={ para hacer la validacion se me pone todo el documento blanco y no sale nada. El required y minLength directamente no me los colorea.

*import React, {useState} from 'react';
import { useForm } from 'react-hook-form'
const HookFormulario = () => {
    const {register, errors, handleSubmit} = useForm();
    const onSubmit = (data,e)=>{
        console.log(data)
    }
    return ( 
        <>
            <h1>Creando un formulario con React Hook Form</h1>
            <form onSubmit={handleSubmit}>
                <input
                    name='titulo'
                    placeholder='Ingrese un titulo'
                    className='form-control my-2'
                    ref={
                        register({
                            required: {value: true, message: 'Pone al menos una letra peton'},
                            minLength:{value: 5, message: 'Minimo 5 letras pajero'}
                        })
                    }
                />
                {   errors.titulo &&
                    <span className='text-danger text-small d-block mb-2'>
                        {errors.titulo.message}
                    </span>}*

1 respuesta 1

0

Si checas la documentación de react-hook-form. La manera en la que ellos recomiendan registrar un input es haciendo spread del register. De la siguiente manera:

<input
    name='titulo'
    placeholder='Ingrese un titulo'
    className='form-control my-2'
    {...register('titulo', {
    required: 'Este espacio es requerido.'
    minLength: { value: 5, message: 'Al menos 5 letras.' }
     })}/>

El register toma dos argumentos: el nombre (un string) por el cual estás registrando el input y las opciones (un objeto) para ese input.

Adicional a eso, hay dos cosas que debes tener en cuenta:

1.Los errores los obtienes del formState:

const { register, handleSubmit, formState: { errors } } = useForm();

2.A la hora de ejecutar el handleSubmit lo debes ejecutar así:

const onSubmit = (data) => console.log(data)
<form onSubmit={handleSubmit(onSubmit)}>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.