Crea formularios fácilmente con React Hook Forms

[@deltecharch]

La explicación estuvo de maravilla. Estoy siguiendo un curso que compré en Udemy y me ha sido de gran ayuda. Lo que veo en el curso, luego lo busco en KZbin para comprenderlo aún más. ¡Qué bueno que existan este tipo de contenidos!

[@jeffersonmaldonado2190]

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

[@juliochirinos2725]

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!

[@Garajedeideas]

Gracias por el feedback! Nos alegramos mucho de que nuestro contenido te sirva de ayuda :)

[@robinsonmontero4275]

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.

[@heidisanchez5786]

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.

[@Garajedeideas]

¡Gracias! Nos alegramos mucho de que nuestros contenido te sirva de ayuda :)

[@mariogiron]

Graciasss! Es importante no dormirse 😁

[@osw2050]

Muchas Gracias no sabes cuanto me ayudaste gracias por tu tutorial único en todo KZbin no hay como el tuyo ,tu video ilumino mi día ,semana y mes muy agradecido

[@Garajedeideas]

Gracias a ti! Nos alegramos mucho de que nuestro contenido te sirva de ayuda :)

[@HigorRocha-l1i]

He conseguido entenderlo a la perfección, explicas todo correctamente. Muchas gracias. Un saludo.

[@Garajedeideas]

¡Gracias a ti! Nos alegramos mucho de que nuestros contenido te sirva de ayuda :)

[@MrEstebanfierro]

Una excelente alternativa para crear formularios de forma muy rápida y eficiente, muchas gracias por compartir.

[@Garajedeideas]

👉 ¡En Garaje seguimos creciendo! Únete al equipo: bit.ly/talento-tech-GDI

[@rafapaz5864]

Señor, es usted una bestialidad de tifon crack master god!!! muchas gracias!

[@SerEfGonzalez]

Muy buen trabajo, excelente explicación, saludos desde Generall Madariaga en la Pcia. de Buenos Aires República Argentina!!!

[@zenzen9043]

¡Excelente trabajo! y gran didáctica. Saludos cordiales desde Argentina, gracias por compartir

[@rana_zurda]

explicas muy bien, la manera en la que avanzas sobre el tema, los ejemplos, excelente! gracias por el contenido

[@betobogino]

Cuanto agradezco haberme encontrado con Garaje de Ideas! Muy buen vídeo, gran explicación

[@tiagoramirez2001]

Muchas gracias por la info. Directo al grano y muy bien explicado. De nuevo, muchas gracias

[@alebarbaja]

🤯 Que gran explicación sobre el uso de esta librería, ¡muchas gracias!.

[@victorzambrano3019]

que bien explicas lo entendi todo rapido a los demas nada no saben explicar

[@UriiSanchez]

Te agradezco, me sirvió bastante este video ya que me dio una idea de como controlar diferentes formularios y tener acceso al state

[@k.santiagodiaz3744]

Excelente, por aqui tienes a un nuevo subscritor. Gracias!

[@coder116]

Excelente explicación. Muchas gracias por compartir como funciona la creación de formularios con React Hoook Forms. Saludos desde Caracas-Venezuela.

[@jeissonalbertopinzon476]

bien .... seria bueno una segunda parte seguro -- gracias por el video

[@GamesMedleyBienvenido]

Este tutorial es hermoso, ahora puedo seguir con mi curso

[@Garajedeideas]

Gracias por tu comentario y nos alegramos de que te haya servido de ayuda :D

[@dariocuray6458]

Kapo para explicar se me hizo muy sencillo entender.Saludos

[@claudioperezdiaz]

muchas gracias, me sirvió mucho el video. saludos desde chile

[@JulioAguero]

Excelente explicación, muy simple y claro... continua así... te estare apoyando.

[@faviocabral2675]

Simple y conciso

[@escuderomdz]

Excelente tutorial, me sirvió muchísimo. Gracias por compartir!

[@mafrunepi]

Gracias por el vídeo. Conciso y bien explicado. Tenéis un suscriptor más.

[@franciscopena1140]

Me aportó mucho tu video. Gracias!

[@juanscasado]

Gracias! muy util y estaremos por aqui ya que ha sido muy util su tiempo!!!

[@ignaciomustafha4170]

Tremendo video!! Saludos desde Argentina

[@luislavayen9495]

Gran explicacion

[@diegocurutchet_code4580]

me encanta como explicas, muy fácil de entender!

[@woodenhouse8531]

Muchas gracias, me ha ayudado mucho el video!

[@Alejo28356]

Demasiado excelente! Mil gracias por este tipo de contenido. Like y suscrito!

[@tatoElpaisa]

Tremenda Utilidad. Gracias por el video.

[@RicardoRamirez-gf4qq]

muy muy bueno saludos desde argentina !!

[@hugoisaiasalvarezgarcia2016]

Genial, explicas de una manera muy sencilla y clara, lo capte muy rápido, gracias

[@jesusamaganaaguilar8767]

GRACIAS POR ESTE BELLO VIDEO

[@franciscomolina-dev]

No conocia este hook pero se gano mi corazon jajaja. Gracias por explicarlo bien claro! Suscrito y like.

[@dearalex2056]

Ostras que videazo! Saludos desde Nicaragua

[@juanrybritezpy]

Que buen video, muchas gracias crack!

[@gabrielsaldana9863]

MUY BUENO BUENISIMA EXPLICACION

[@jesusre8495]

Excelente video, gracias!

[@danielespanadero]

Muy buen vídeo! Muchas gracias por compartir este conocimiento! Un abrazo!!

[@victoriarodriguez2137]

que magnifico video

[@codigonow995]

Saludos. Gracias por el tutorial. Me hace falta saber cual es el codigo para enviar a la base de dato en este caso. Gracias.

[@carolnavia3943]

Excelente la manera de explicar. Me ayudó mucho. Saludos

[@santiagotorres8680]

Muchas gracias por compartir tu conocimiento :)

[@martincarp4671]

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

[@poisonov]

Mario eres un profesor excelente, gracias por compartir

[@arigrafik]

¡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!

[@GustavoHernandez-he4gd]

muy buena explicación, gracias por aportar

[@gilbertardila]

Excelente Hook muy bien explicado como siempre

[@victorioortega9509]

Gracias

[@DavidLopezCubo]

Excelente y muy claro!

[@joacovega9263]

Re buen video, ya me suscribí. Una consulta, como se podría hacer para vaciar los inputs una vez enviado los datos?

[@agustins.2381]

Muy bueno el vídeo! Me hubiese servido mucho que hubieras explicado también como trabajar con check box y switch

[@juanmanuelburdet9699]

Un groso, super clarisimo, gracias

[@rodgon823]

Excelente video! Muchisimas gracias, solo tengo una duda ¿Como podriamos limpiar los campos al hacer el submit?

[@josecedeno1957]

Excelente aporte amigo, muy bien explicado!!!

[@transformers886]

muchas gracias

[@CreceXDiez]

Grande hermano, excelente explicación

[@8koi245]

fue una pesadilla como no tenés idea joder, ahora la quiero dejar bonita y bueno que mejor que agregar esta lib!

[@tomasliendo3127]

Muy clara la explicación, muchas gracias !!!! =D

[@rgbesmedia]

Buenísimo 🎉

[@Johnlb91]

Wow! muchas Gracias!

[@Willyrosa55]

Que buen video, explicas muy muy bien, gracias por los conocimientos compartidos :D

[@lancerrider]

Muy bien ganado su like 👏

[@HealthyBodyMagcom]

super genial! buen contenido!!! te felicito

[@estebancarreno7310]

excelente video

[@Artifismo]

👌

[@ericksegura478]

Genial

[@saulhuarcayaquispe5236]

Gracias :3

[@craulynfeliz4177]

Uff Excelente video , un suscriptor mas

[@TheAndres7777]

buen video!

[@cufando]

Geeeniaaal Muchas gracias!

[@esencoder]

Genial!!!

[@all-eter-4289]

Simplemente Perfecto XD

[@victorsandoval6145]

15:25 custom validation

[@itsKreisler]

Esta increíble....!!!! En el onSubmit que create ya puedo hacer una petición con el data y enviarla a una url mediante fetch?

[@Garajedeideas]

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

[@marcemelgar]

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 ??

[@3Bluewind]

GRACIAS!!!!!

[@mariacandelareynoso1337]

barvaro!

[@sebamise2406]

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)

[@magaliacevedo8153]

Hola buenas como se hace el envio al correo, hay algun video? gracias

[@all-eter-4289]

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?

[@Garajedeideas]

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.

[@all-eter-4289]

@@Garajedeideas gracias ☺️!!

[@gahaIor]

Hola, y donde configuras el correo al que quieres recibir la info?

[@Garajedeideas]

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/

[@caudiovisual_creativo]

Como podría precargar datos o rellenar los inputs, luego de realizar la consulta a un API

[@jamito58]

como puedo comparar dos campo por ejemplo contraseñas que se a igual o no

[@Skatefromnqn]

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

[@Garajedeideas]

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 😅

[@dvdtucapo]

Muy bueno! Pero no entendí donde va el mothod y el action del form :/

[@yanluisnunezlara319]

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.

[@yanluisnunezlara319]

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.

[@cesaraugustojaramillohen-vu2pn]

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

[@claudioperezdiaz]

alguien sabe como hacerlo funcionar con reactstrap ????

[@melisacampos2540]

Buenisimo pero no me carga la pagina

[@mauriciocruzlopez4526]

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.

[@mauriciocruzlopez4526]

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).

[@Redpurplx]

Tengo un problema, al momento de utilizar formState errors, mi app se pone en blanco completamente. Alguien me podría ayudar?

[@hugoisaiasalvarezgarcia2016]

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

[@Garajedeideas]

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: '[e-mail]', edad: 23, pais: 'España' } });

[@antoniojesusmoragalvan5471]

pero como lo hacemos funcional???

[@Garajedeideas]

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.

[@ing.alexanderbarajas6736]

@@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?

[@8koi245]

"adivino en principio no soy" HAHAHHAHA típico