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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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