Crea formularios fácilmente con React Hook Forms
HTML-код
- Опубликовано: 23 мар 2022
- En este vídeo vamos a revisar la librería React Hook Forms, una librería de hooks personalizados que nos permite crear formularios de una manera muy sencilla y efectiva.
👉 Conoce nuestras vacantes actuales de tecnología en bit.ly/talento-tech-GDI
Si quieres aprender más de programación, te dejamos por aquí otros Garaje Code Pills que seguro que te gustarán:
- useState Hook en 20 minutos: • useState Hook en 20 mi...
- useContext en 20 minutos: • useContext en 20 minutos
- useEffect en 20 minutos: • useEffect en 20 minutos
Aquí tienes el código por si quieres usarlo:
github.com/GarajedeIdeas/Code...
Esta introducción a la librería React Hook Forms fue impartida por Mario Girón, Senior Full Stack Developer:
/ mariogironm
Si quieres estar al tanto de todo lo que hacemos, puedes inscribirte aquí 👇
garajedeideas.com/livecoding/...
----------
Garaje de Ideas es un estudio de Diseño, Tecnología y Data. En este canal encontrarás tutoriales, cursos y ejemplos prácticos paso a paso de desarrollo web y programación.
Podrás encontrar desde cursos de JavaScript, Node.js, D3.js, Vue3, Typescript, HTML, CSS, React... hasta cómo optimizar tu proceso de trabajo. 
Наука
![NoCap - Maliboo [Official Music Video]](http://i.ytimg.com/vi/FUV7E0QyniU/mqdefault.jpg)
Excelente explicación, una de los mejores tutoriales que he visto en mis 18 años de carrera como desarrollador. Soy docente de matemática e informática. Saludos desde Venezuela
Muchas Gracias no sabes cuanto me ayudaste gracias por tu tutorial único en todo RUclips no hay como el tuyo ,tu video ilumino mi día ,semana y mes muy agradecido
Gracias a ti! Nos alegramos mucho de que nuestro contenido te sirva de ayuda :)
Me gusta mucho cómo explicas y además la rapidez con la que lo haces, no hay desperdicio de tiempo ni uno se duerme, soy tu fan.
¡Gracias! Nos alegramos mucho de que nuestros contenido te sirva de ayuda :)
Graciasss! Es importante no dormirse 😁
Estimado, en principio le felicito por la buena dicción y su facilidad para hacer llegar el mensaje. A veces menos es más. Y eso es justo lo que usted hace. Simple, al grano y con un lenguaje muy normal que hace que uno entienda con mucha facilidad. Excelente material!
Gracias por el feedback! Nos alegramos mucho de que nuestro contenido te sirva de ayuda :)
He conseguido entenderlo a la perfección, explicas todo correctamente.
Muchas gracias. Un saludo.
¡Gracias a ti! Nos alegramos mucho de que nuestros contenido te sirva de ayuda :)
🤯 Que gran explicación sobre el uso de esta librería, ¡muchas gracias!.
Gracias por el vídeo. Conciso y bien explicado. Tenéis un suscriptor más.
Cuanto agradezco haberme encontrado con Garaje de Ideas! Muy buen vídeo, gran explicación
Mario eres un profesor excelente, gracias por compartir
Genial, explicas de una manera muy sencilla y clara, lo capte muy rápido, gracias
Muchas gracias por la info. Directo al grano y muy bien explicado. De nuevo, muchas gracias
explicas muy bien, la manera en la que avanzas sobre el tema, los ejemplos, excelente! gracias por el contenido
Excelente explicación, muy simple y claro... continua así... te estare apoyando.
Excelente explicación. Muchas gracias por compartir como funciona la creación de formularios con React Hoook Forms. Saludos desde Caracas-Venezuela.
Una excelente alternativa para crear formularios de forma muy rápida y eficiente, muchas gracias por compartir.
Muchas gracias hermano, eso era justo lo que estaba buscando una forma de manejar los formularios de manera que me permita tener control sobre el mismo en todo momento y acceder al valor que tienen sus campos, sin tener que hacer submit.
¡Excelente trabajo! y gran didáctica. Saludos cordiales desde Argentina, gracias por compartir
Que buen video, explicas muy muy bien, gracias por los conocimientos compartidos :D
Excelente la manera de explicar. Me ayudó mucho. Saludos
me encanta como explicas, muy fácil de entender!
Muy buen trabajo, excelente explicación, saludos desde Generall Madariaga en la Pcia. de Buenos Aires República Argentina!!!
Excelente aporte amigo, muy bien explicado!!!
Muy buen vídeo! Muchas gracias por compartir este conocimiento! Un abrazo!!
¡Buenísimo! Gracias por hacer este vídeo, me hubiese gustado que explicaras como colocar la contraseña, pero ya eso lo investigaré por mi cuenta. Por cierto me he suscrito a tu canal, espero que puedas continuar publicando más contenido actualizado sobre React =) ¡Un saludo!
Excelente tutorial, me sirvió muchísimo. Gracias por compartir!
No conocia este hook pero se gano mi corazon jajaja. Gracias por explicarlo bien claro! Suscrito y like.
Te agradezco, me sirvió bastante este video ya que me dio una idea de como controlar diferentes formularios y tener acceso al state
Señor, es usted una bestialidad de tifon crack master god!!! muchas gracias!
Excelente Hook muy bien explicado como siempre
Gracias! muy util y estaremos por aqui ya que ha sido muy util su tiempo!!!
Muy clara la explicación, muchas gracias !!!! =D
Demasiado excelente! Mil gracias por este tipo de contenido. Like y suscrito!
Tremenda Utilidad. Gracias por el video.
Excelente, por aqui tienes a un nuevo subscritor. Gracias!
Muchas gracias por compartir tu conocimiento :)
Tremendo video!! Saludos desde Argentina
Simple y conciso
Me aportó mucho tu video. Gracias!
muy buena explicación, gracias por aportar
Ostras que videazo! Saludos desde Nicaragua
Grande hermano, excelente explicación
Muchas gracias por la información, gran video
excelente explicacion, me gusto mucho.
Muchas gracias, me ha ayudado mucho el video!
super genial! buen contenido!!! te felicito
bien .... seria bueno una segunda parte seguro -- gracias por el video
me gusto la explicación y muy clara
Excelente video, gracias!
que magnifico video
Excelente y muy claro!
Que buen video, muchas gracias crack!
muy muy bueno saludos desde argentina !!
Wow! muchas Gracias!
MUY BUENO BUENISIMA EXPLICACION
Gran explicacion
GRACIAS POR ESTE BELLO VIDEO
Geeeniaaal Muchas gracias!
Un groso, super clarisimo, gracias
Uff Excelente video , un suscriptor mas
Muy bien ganado su like 👏
que bien explicas lo entendi todo rapido a los demas nada no saben explicar
muchas gracias
excelente video
Muy bueno el vídeo! Me hubiese servido mucho que hubieras explicado también como trabajar con check box y switch
Kapo para explicar se me hizo muy sencillo entender.Saludos
GRACIAS!!!!!
Simplemente Perfecto XD
Gracias
buen video!
Este tutorial es hermoso, ahora puedo seguir con mi curso
Gracias por tu comentario y nos alegramos de que te haya servido de ayuda :D
Genial!!!
Muy buen tutorial, me llama la atencion la linea 17
const incluirTelefono = watch('incluirTelefono');
ya que se define como una constante y lo que entrega watch() varia
Gracias :3
Excelente video! Muchisimas gracias, solo tengo una duda ¿Como podriamos limpiar los campos al hacer el submit?
Genial
Saludos. Gracias por el tutorial. Me hace falta saber cual es el codigo para enviar a la base de dato en este caso. Gracias.
Re buen video, ya me suscribí. Una consulta, como se podría hacer para vaciar los inputs una vez enviado los datos?
Excelente! Mil gracias por la información. Te ganaste un nuevo Sub!
Una consulta. Si quiero validar 2 emails para que sean iguales. La función chequearía si value.email1 === value.email2 ??
fue una pesadilla como no tenés idea joder, ahora la quiero dejar bonita y bueno que mejor que agregar esta lib!
Tremendo videazo, me suscribo! el único inconveniente que tengo y me pregunto si podrían ayudarme es que el mensaje de error aparece siempre, es decir debería de aparecer cuando se intenta enviar el formulario, pero en el estado actual, apenas escribes una letra aparece el mensaje y eso no quedaría bien... (El formulario funciona simplemente es un problema de estética mi problema)
👌
barvaro!
Esta increíble....!!!! En el onSubmit que create ya puedo hacer una petición con el data y enviarla a una url mediante fetch?
Hola Kreisler! Exacto, en el onSubmit podrías tomar todos los datos recogidos a través del formulario y enviarlos utilizando fetch o cualquier otra alternativa como por ejemplo axios
Hola buenas como se hace el envio al correo, hay algun video? gracias
como puedo comparar dos campo por ejemplo contraseñas que se a igual o no
Como podría precargar datos o rellenar los inputs, luego de realizar la consulta a un API
Entonces si quiero recibir el valor del check debo estar manejandolo con un estado? o hay algun modo de que el mismo retorne un true o un false segun este activo o no?
Hola! Mediante el método watch que nos ofrece el hook podemos monitorizar el estado del check, pero si necesitas guardar el valor, deberías manejarlo a través del estado del componente.
@@Garajedeideas gracias ☺️!!
Hola, y donde configuras el correo al que quieres recibir la info?
Hola! En este caso necesitarías un server de backend como Node.js y Express que procese los datos enviados en el form y los envíe a tu correo. También puedes utilizar algún servicio de cloud para realizar el envío como EmailJS: www.emailjs.com/
muy buenas tardes, excelente la expliación, estoy empezando en React pero me encuentro con una ncesidad, y es crear dentro de un formulario validado, 2 cajas de texto para ingresar valores numericos y una tercera para mostrar el resultado, alguien me pude dar una idea de como hacerlo, muchas gracias
alguien sabe como hacerlo funcionar con reactstrap ????
Quisiera realizar una consulta, en la línea :{errors.nombre?.type === 'required' && El campo nombre es requerido} me aparece el siguiente error "Module parse failed: Unexpected token (369:21). You may need an appropriate loader to handle this file type." Hay alguna dependencia que no tenga instalada o se puede realizar de otra forma? Gracias y excelente video
Hola Leonel! Muchas gracias por tu comentario!
En cuanto al error que te sale, necesitaríamos ver directamente cómo te sale el error en el gestor de código. Tal cual nos lo comentas no podemos darte solución al problema 😅
Tengo un problema, al momento de utilizar formState errors, mi app se pone en blanco completamente. Alguien me podría ayudar?
15:25 custom validation
Buenisimo pero no me carga la pagina
Tengo una duda como se podrian pasar datos a nuestros inputs, es decir ya tener almacenada información en un estado y después pintar esa información en el formulario no logro encontrar la respuesta
Hola Hugo, para poder pasar datos por defecto al formulario en su creación hay que hacerlo a través de la definición del propio hook, algo así:
useForm({
defaultValues: { nombre: 'Mario', direccion: 'C Falsa 123', email: 'mario@gmail.com', edad: 23, pais: 'España' }
});
Muy bueno! Pero no entendí donde va el mothod y el action del form :/
Me imagino que la función en el evento submit del formulario llamada handleSubmit que viene del Hook y que a la vez ejecuta la función creada llamada onsubmit, ahí se usa alguna API como fetch, o httpsrequest o axios para hacer el envío de datos.
Ejemplos: const onSubmit = async (data) => {
try {
const response = await fetch('URL_DE_TU_API', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
});
if (response.ok) {
console.log('Datos enviados correctamente');
} else {
console.error('Error al enviar los datos');
}
} catch (error) {
console.error('Error en la solicitud:', error);
}
}; ya la función handleSubmit se encarga de gestionar los datos que se escriben en los elementos del formulario.
pero como lo hacemos funcional???
Hola Antonio, esta librería está enfocada a maquetar el formulario y su funcionalidad. Para realizar envíos del formulario habría que hacerlo a través de otra tecnología o sobre alguna aplicación de backend.
@@Garajedeideas Buen día!!! Muchas gracias por sus videos, me parecen muy claros. Siguiendo este hilo quisiera saber como se puede hacer un update de un registro utilizando este hook, Como se cargan los datos a los campos para editarlos? se puede usar useState?
E usado el valor por defecto en el "hook useForm:" pero cuando hago esto las validaciones por ejemplo de campo vacío (required) no funciona, es decir no me aparece nada. Borro ese valor por defecto y funciona. Ni siquiera funciona cuando le doy al botón de enviar el formulario. Supongo que cuando tiene el valor por defecto ya se almacena y no hay vuelta. Voy a investigar para encontrar una solución.
Excelente video, e aprendido un montón. Es increíble como los errores me persiguen xd. Trate de escribir un poco mas en el comentario pero no me dejaba. tuve que recargar la página. Supongo que fue porque borre la cache del navegador (1h).
👉 ¡En Garaje seguimos creciendo! Únete al equipo: bit.ly/talento-tech-GDI
"adivino en principio no soy" HAHAHHAHA típico