Intento implementar un formulario con react-hook-form . Intenté esto:
.... <form onSubmit={handleSubmit(onSubmit)} className='mt-4 register-form'> <div className='row'> <div className='col-sm-6'> <div className='input-group mb-3'> <Controller control={control} name={"name"} // the key of json defaultValue={""} render={({ field }) => ( <input {...field} type="text" className="form-control" placeholder="Name" aria-label="name" onChange={(e) => field.onChange(e.target.value)} /> )} /> </div> </div> .....Código de página completa:
Cuando envío el formulario, envío un mensaje POST usando:
import axios from "axios"; import React from "react"; const baseURL = "https://jsonplaceholder.typicode.com/posts"; export const SubmitContact = (json) => { return axios.post(baseURL, json); };Pero no hay un mensaje de validación en el formulario ni un mensaje final de que el formulario se ha completado correctamente.
¿Sabes cómo puedo implementar esta funcionalidad?
Intente obtener los errors de useForm así:
const { errors, ...rest } = useForm(); <div className="col-sm-6"> <div className="input-group mb-3"> <Controller control={control} name={"name"} // the key of json defaultValue={""} rules={{ name: { required: true } }} render={({ field }) => ( <input {...field} type="text" className="form-control" placeholder="Name" aria-label="name" onChange={(e) => field.onChange(e.target.value)} /> )} /> {errors.name && ( <div className="alert alert-danger">{errors.name.message}</div> )} </div> </div>;Para mostrar el mensaje de error:
const { errors, control, handleSubmit } = useForm(); ... <form onSubmit="{handleSubmit(onSubmit)}" className="mt-4 register-form"> <div className="row"> <div className="col-sm-6"> <div className="input-group mb-3"> <Controller control={control} name="name" defaultValue="" render={({ field }) => ( <input {...field} type="text" className="form-control" placeholder="Name" aria-label="name" onChange={(e) => field.onChange(e.target.value)} /> )} /> {errors.name && <p>{errors.name.message}</p>} </div> </div> </div> </form>Para restablecer el formulario después del envío:
const { errors, control, reset, handleSubmit } = useForm(); ... const onSubmit = (formData) => { try { SubmitContact(formData).then((res) => { setPost(res.data); reset(); }); } catch (e) { console.error(e); } };No está utilizando las rules correctamente en el componente Controller , no necesita definir el nombre de la entrada registrada, solo tiene que decir reglas:
rules={{ required: "Required", // Note you are wrapping this inside a key which is not required }} Para acceder a estos mensajes de error, debe usar formState de useForm
const {formState: {errors}} = useForm() // accessing errors {errors.country?.message} Para borrar el formulario, simplemente use reset
Aquí hay un entorno limitado de trabajo de su código: https://codesandbox.io/s/late-haze-jivrwp?file=/src/App.js
Al enviar, puede ver que aparece el error en el campo del país