Guía de Formik - Librería para Formularios en React
ฝัง
- เผยแพร่เมื่อ 10 ก.พ. 2025
- En este video vamos a ver como trabajar con formik, la mejor librería para trabajar con formularios dentro de React.
🚀 Blog de Diseño Web:
www.falconmaste...
⭐ Curso de Diseño Web desde Cero:
www.desarrollo...
⭐ Curso de PHP y MYSQL desde Cero:
www.desarrollo...
⭐ Curso de React y Firebase desde Cero:
www.desarrollo...
⭐ Curso de Bootstrap 5:
www.desarrollo...
⭐ Curso de Woocommerce:
www.desarrollo...
---
🔗 Código del Proyecto: github.com/fal...
🔗 Formik: formik.org/
📄 Expresión Regular Nombre: /^[a-zA-ZÀ-ÿ\s]{1,40}$/
📄 Expresión Regular Correo: /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/
---
Redes Sociales:
📌 Twitter: / falconmasters
📌 Página de Facebook: / falconmasters
Si te gusto el video dale manita arriba y no olvides suscribirte para mas tutoriales de desarrollo web!
Puto amo como siempre ✌️😄
@@vanessamc3342 haha gracias !
Este tutorial sigue siendo vigente a dia de hoy, muchas gracias crack!😌
Gracias por la paciencia y la manera tan excelente de explicar.
Saludos
Muchísimas gracias Carlos, desde que vi tus primeros videos hace años supe que me tenía que suscribir. Muchas gracias por todo el apoyo!
¡Gracias!
que pedaso de tutorial, excelente! yo tenia dudas que me adelante a buscar pero resulto que todas las resolvio a su tiempo jaja
Excelente video, y la explicación, estoy empezando a armar un formulario y realmente me sirve muchísimo.GRACIAS
Amigo eres un gran maestro, gracias por tanto. Un abrazo
Excelente Carlos, Gracias infinitas, fue un placer haber seguido el video, realmente me abrió la mente a posibilidades infinitas. Gracias, Gracias, Gracias
Mejor tutorial de Formik que he visto
Una gran herramienta, y muy bien explicada. Gracias.
Excelente video....muchas gracias !!!
Simplificando todo como siempre!
Buenas! consulta! Tengo una tabla y quiero que al apretar el boton edit ya me cargue como "initialvalues()" los datos del usuario en cada campo, la fino viene de un param... como se haria eso como algo asi (pero esto obvio que no va)-> value={formik.values.nombre&&dataEdit.nombre}
Excelente video! Muchas gracias por compartir. Súper claro todo
Gracias!! muy buena tu explicación
Excelente Video. Muchas gracias por todo lo que enseñás. Me fuiste de mucha ayuda. Voy a seguir viendo tus tutoriales para seguir aprendiendo.
Muchas gracias! Espero que aprendas mucho en todos ellos.
Gracias por el tutorial, rápido, fácil y super entendible.
Gracias amigo, muy buena guía, explicas muy claro. Te ganaste un nuevo suscriptor.
Muy buena explicación.
Hola, por ahora funciona! Pero tengo algunas dudas. Cómo hago validaciones? Por ejemplo, siguiendo tu form, alguien podría mandar u poniendo un nombre o un mensaje con una sola letra, cómo hago para poner un minlength? Y la otra duda es cómo hago para que sea realmente funcional, o sea que pueda enviarlo a un servidor y me llegue a mi mail la información que envía el usuario?
Muchas gracias!
Excelente!! te agradezco mucho este video!
Buenisimo el video, no usar estados dentro de un componente es una gloria jajaj
Excelente video, justo ahora estaba buscando algo sobre Formik 👍
Muchísimas gracias por el video, excelente.
Excelente tutorial... gracias por tu trabajo 🙂
que buen video! muchas gracias por la completisima explicación! ahora lo aplico en mi proyecto ;)
Gracias chulisimo Falcon..
Muchas gracias ! muy bueno tu aporte.Saludos
Muchas gracias por el contenido, excelente video. Saludos:)
Nice video bro !
I just have one thing to correct at the minute 27:10 when u say that the variable errores must be a declared as let.
Remember that u r working with an object that has the property of being mutable.
Therefore later when u add a new prop like errores.nombre = "anything"
It doesn't matter if u declare the errores variable as const or let.
Because u are not changing the value of the variable. You r just mutating it.
Once again you've done a really good job on this video. These things are really useful for the community
Excelente, gracias!
Muy buen video, bien explicado, como siempre, gracias! 👏
Exelenete he estado buscando una libreria que me ayudara a no hacer esto manualmente saludos y exito hermano voy a compara tu curso de udemy para apoyar
Me alegra que te sirviera y gracias por el apoyo lo aprecio mucho.
Muy buena explicación, eres un crack bro.
Gran video. Gracias por el gran aporte 😀
38:24 como se hace la llamada a la api de whatsapp?
Excelente tutorial, me sirvió bastante.
Gran tutorial eres un Crack !!
Te amo sos un genio
Muchas gracias!!!
exelente como siempre !!!!
Muy buen tutorial, aprendí demasiado y te ahorra mucho tiempo a comparación de la otra forma, pero me quedo una duda en el video donde realizas la validaciones usando estados y le das estilos con styled components,¿Como agregaríamos estilos cuando es validado o no, ya que antes importabas Input que era un styled-component y ahora usas Field?
gran video gracias
el video esta muy bueno una pregunta en temas laborales como se enviarian a un api?
Excelente video. Solo falto implementar la validación usando Yup
Demasiado bueno amigo
Gracias falcon!!
Un abrazo
Genial FalconMaster !! Felicidades. Sólo faltaría la explicacion para datos adjuntos para calificar de excelente tu tema. Ya tengo todo listo pero ahora cómo lo envío ya en producción?. Saludos.
Muy buen tutorial!
luego los values de los inputs, los puedo usar como props para otro componente?
Hola !! Cual es el theme de vscode que esta usando ?? Esta buenisimo.
Muchas gracias, una pregunta, si quisiera añadirle un estilo disbled al botón cuando alguno de los inputs no pasen la validación con qué propiedad podría validar ese estilo?
Falcon, No te olvides enseñar de GRAPHQL EN EL BACKEND Y FRONTEND.
TAMBIEN EN TIEMPO REAL.
Por favor
Excelente video, muy buen trabajo. ¿Existe alguna forma que las validaciones de campo, como campos vacíos, largo de texto, etc lo haga automáticamente sin aplicar lógica?, esto facilitaría mucho las cosas. Algo así como laravel con "validate". Muchas gracias.
Te recomiendo instalar Yup
yo tengo una duda, tengo un formulario en el cual tengo que insertar el rfc ¿como le hago para que me muestre un dialog si el rfc ya existe en la base de datos?
Excelente, fui el like número 1000 jeje
muchas gracias!
Hola, una consulta! como podría trabajarlo en caso de un textarea? lo intenté de la misma forma que los inputs, pero algo sale mal..
Hola gracias por el contenido!. una pregunta, como manejas inputs como checkbox, radibutton y select en el caso que sea un formulario mas complejo? saludos
Muy bueno el video pero como obtengo los valores de un campo mientras escribo, ósea capturar los valores de un campo mienta escribo
Me gusta el tema de vscode y el sonido de tu teclado, que usas en ambos casos? Buen video bro
yo los formularios los trabajo de esta manera:
const [formData, setFormData] = useState(initialFormValue());
function initialFormValue() {
return {
nombre: "",
precio: ""
}
}
para la función que permite cambiar los valores:
const onChange = e => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};
y el onChange lo mando llamar dentro del form en lugar de llamarlo en cada input
buen video
gracias bro
Comienza en 12:45
tal cual
Gracias 😁😁😁
Por algún motivo, cuando instalo "formik", me empieza a salir un error en "eslint" que dice " 'name' is missing in props validation " cuando paso props a un componente como función. Pero ya probé y es cuando instalo "formik".
Falcon, como puedo utilizar formik con componentes Antd, Syncfusion, Material UI, etc.
excelente.
Excelente video, si quisiera pasar el estado de otro componente por props como valor de uno de los fields se podria con formik ?
Me pasa idem con Formik, le paso por props el valor a los campos y se inicia la primera vez en blanco o siempre con los datos del registro anterior. No encuentro como hacer que se inicie con los datos del registro actual.
Buenas Carlos, tenés planeado hacer un curso de Next js para subir a Udemy?
Si, pero no estoy seguro de cuando lo haré. Primero estoy trabajando en actualizar todos mis cursos.
crack!!
porque si pongo un console log de values dentro de la funcion de retorno siempre me imprime 3 veces los valores?
{({ values, errors, touched, handleSubmit, handleChange, handleBlur }) => (
{/* */}
{console.log(values)}
Hola. ¿Cómo haría para realizar la opción de editar de un CRUD con axios para que me cargue los datos de la BD del registro a editar con FORMIK?
Supongo que podrìas cargarlos en el initialValues del formik
podrías hacer tutorial uno para aprender implementar pasarelas de pago?
31:18 48:00 SELECT countries
Alguna guía ara intergralo con recaptcha?
Buen video, una pregunta se puede usar formik dentro de un modal ?
Si claro, sin problemas
Epic!
una duda, se puede integrar formik a react - bootstrap? para que visualmente quede agradable ? ahahaha (se que pusiste tus estilos pero con bootstrapn te facilita mucho el trabajo) saludos desde chile
Hola Camila, nunca lo he hecho pero seguro que se puede. React bootstrap solo aporta componentes, mientras que formik agrega la funcionalidad. No veo porque no se podrían juntar ambos.
Cual es la fuente de letra que usas en VSC?, se lee perfecto
Utilizo estas:
th-cam.com/video/Og8JpOhp8TQ/w-d-xo.html
A mi no me borra el formulario con el resetForm, pq?
Que fuente utilizas master?
Utilizo estas:
th-cam.com/video/Og8JpOhp8TQ/w-d-xo.html
20:09 como se hace la seleecion de multicursores en mac?
No se como sea en mac, pero tiene que ser similar, Alt + Clic, o Command + Click, o shift + click.
@@FalconMasters Gracias esta genial el video esta mejor que el curso que compre en udemy
tienes cursocompleto de react??? actualizado
Si, este es mi curso de React:
www.udemy.com/course/react-desde-cero/?couponCode=43CAFEF7CAA1BAB844D8
Esta completo y actualizado.
Hola FalconMaster, tengo una súper duda y quiero que me ayudes!, bueno es que quiero implementar en mi página web en el title mi marca pero cuando salga en el buscador, ejemplo: Campamentos libres - Mimarca, que salga en el buscador pero cuando entren a la web vean en el código no salga "´- Mimarca", no sé si me doy a entender, sé que lleva un código en el title para que aparezca Mimarca en el buscador pero no en el código Saludos!! y abrazos!!
Hola Danny, eso tiene que ver con SEO, yo no conozco mucho del tema asi que no podria decirte si hay alguna forma de hacerlo.
Pero según entiendo el title de tu sitio tal como lo tienes en el código es como lo toma Google.
Debes usar Javascript para eso, document.title = variabledejacascript; saludos
que opinas de React Hook Form?
Yo lo considero mucho más robusto que Formik.
Mi estimado, si adquiero tu curso, puedo terminarlo a mi ritmo o hay un plazo de semanas por cada sesión??
Quiero tomar tu curso de desarrollo web en Udemy para superarme en el mundo de la programación
Si, puedes seguir el curso a tu ritmo, una vez que lo adquieres es tuyo y se queda en tu cuenta de Udemy para siempre
Estoy frenado con este error:
Error: Objects are not valid as a React child (found: object with keys {nombre, correo}). If you meant to render a collection of children, use an array instead.
Ayuda!!!!
Estoy frenado con la conección de la API quien me puede ayudar
mare, yo tarde casi 10 minutos en instalar react TS y copiar el código base -.-
El código tira este error en la parte de las validaciones:
En esta línea:
errores.nombre = 'Por favor ingresa un nombre'
Dice "La propiedad 'nombre' no existe en el tipo '{}'.ts(2339)"
Alguien sabe cómo solucionarlo ?
Hola Pablo, revisa bien el código, lo mas seguro es que tengas algo mal.
Amazing
Instalé email js y formik me envía formularios vacíos en caso de que el usuario lo decida :(
Hola Pablo, lo único que podría decirte es que seguramente algo este mal en el código.
ya no aparece el código en Github...
Aquí lo tienes: github.com/falconmasters/formularios-react-formik
Amigos alguien podría orientarme, como haría para direccionar hacia la pagina principal de mi aplicación web después de que el usuario se loguee?
Hola Leonardo, eso depende mucho de que lenguaje estés utilizando y si es del lado del cliente o del servidor.
@@FalconMasters Si claro entiendo estoy usando node js y socket io del lado del servidor y Reactjs con peerjs, socket io-client en el frontend para modelar una app de video llamadas ya tengo mi app lista, pero mi problemática radica en como adicionarle un formulario de registro y de inicio de sesión a dicha aplicación web ya que no sabria como enrutarlos, y que luego de que el usuario pueda registrarse sea direccionado hacia la pagina principal de la app. Si alguien pudieras orientarme o ayudarme te lo agradecería una y mil veces. Saludos y por cierto muchas gracias por compartir tus conocimientos tu canal vale oro, mereces un millón de suscriptores.
@@mrgatsby039 lograste solucionarlo?
@@douglaszuniga2773 si bro gracias
pense que las validaciones lo hacia formik
X2 para eso estaba viendo que tal con la libreria, pero aun asi no está mal, esta buena para usarla en combinacion con yup y bootstrap
LIKE :D
50 minutos para eso estoy en el minuto 30 ya me desanime de formik no tienes metodologia
53 minutos'?? next!
Suerte encontrando uno mejor explicado