Formularios sencillos con Formik + Typescript 📄

Crear formularios suele ser bastante tedioso, sobretodo porque nuestros formularios pueden ser tan simples como un login, hasta tan complejos como un formulario con 50 campos con múltiples validaciones. En esta ocasión, vamos a construir un formulario en React, utilizando Formik.

El primer paso será crear nuestro boilerplate utilizando create-react-app con el siguiente comando:

npx create-react-app formik-form --template typescript

Una vez creado el proyecto, eliminaremos los archivos no necesarios App.css, index.css, logo.svgterminando únicamente con los siguientes archivos:

Lo siguiente será instalar Formik con el siguiente comando:

npm install formik --save

Una vez instalado, comenzaremos a crear nuestro primer formulario en el directorio ./src/components/Form/index.tsx:

Y lo importaremos en nuestro componente App.tsx.

De vuelta en nuestro componente Form , comenzaremos por importar los siguientes módulos de Formik:

import { Formik, Form, Field } from "formik";

Y agregamos a nuestro JSX:

Es el momento en que Typescript entra al rescate! Aquí lo podemos ver haciendo su trabajo. Tenemos un problema con el componente Formik :

Esto significa, que los propsque debe recibir obligatoriamente el componente de Formik son initialValues y onSubmit , así que vamos a definirlos utilizando el poder de typescript para definir sus tipos:

interface FormValues {
firstName: string;
lastName: string;
email: string;
}
const initialValues: FormValues = {
firstName: "",
lastName: "",
email: "",
};
};

Nuestro método onSubmit se encargará de mostrar un alert cuando se haga submit del formulario

const onSubmit = (values: FormValues) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
}, 500);
};

Ahora, podemos utilizar los componentes Form y Field para crear el formulario y cada uno de sus campos. Ya que tenemos 3 valores iniciales, crearemos 3 componentes para cada valor.

Es importante que el valor de htmlFor del label sea igual al valor name del componente Field , esto ya que a través de este valor, podremos después hacer validaciones y demás acciones. Al final del formulario pondremos un botón para hacer submit del formulario.

Y, así es como se vería nuestro formulario.

Como que le falta algo de personalidad, no? Así que vamos a ponerle unos estilos para que se vea mejor. Dentro del directorio de nuestro componente Form , crearemos un archivo styles.css y añadiremos el siguiente código:

Y cambiaremos un poco el código de nuestro componente Form para añadir las clases y también poner los placeholders a cada field, quedando nuestro componente de la siguiente manera:

Una vez aplicados los cambios, en nuestro navegador veríamos el siguiente formulario:

Al llenar nuestro formulario y hacer click en el botón Submit veríamos los siugientes valores en el siguiente alert:

Genial! Pero, a nuestro formulario aún le falta algo muy importante y es la validación. Sin validación, nuestro formulario puede recibir cualquier tipo de valor en cada campo!

Para solucionarlo, vamos a utilizar un schema builder llamado yup. Lo instalamos con el siguiente comando:

npm install yup --save

Con yup podremos definir un esquema, el cual pasaremos a través de props como validationSchema a nuestro componente Formik para poder realizar las validaciones adecuadas.

Lo primero será crear nuestro validationSchema y definir las reglas de validación. Creamos un archivo dentro del directorio de nuestro componente con el nombre validationSchema.ts y añadimos el siguiente código.

Lo siguiente será importar nuestro validationSchema ademas de un componente para mostrar los errores de validación llamado ErrorMessage .

import { Formik, Form, Field, ErrorMessage } from "formik";
import validationSchema from "./validationSchema";

Nuestro validationSchema lo pasaremos a nuestro componente Formik a través de props:

<Formik
...
validationSchema={validationSchema}>

Por último, es necesario añadir nuestro componente ErrorMessage junto a cada componente Field . Estos componentes se van a relacionar a través del valor que tengamos en en el prop name .

Por último, añadimos los estilos a la clase form__error :

.form__error {
margin: 0.5rem;
color: orangered;
}

Y ahora estamos listos para probar nuestro formulario!

Las validaciones funcionan correctamente! Y, para poder hacer submit debemos corregir los valores ingresados.

Genial! Hasta este punto, hemos podido crear un formulario que luego fácilmente podríamos conectar con algún API, aumentar más campos, o reutilizarlo para crear otros formularios.

Ahora, añadiremos un par de campos más para probar distintos inputs, como un textarea , checkbox, radiobutton y select.

Para nuestro textarea definiriemos un campo bio para poder escribir una breve autobiografía; para el checkbox pondremos una sección con opciones de tecnologíaspreferidas; para el radio button, una sección para indicar si queremos o no recibir notificaciones y, finalmente para el select un campo para elegir la frecuencia con la que programamos 😄.

Comenzando con el campo bio, es necesario añadirlo a la interfaz, así como, nuestro valor inicial.

Y para el jsx, el siguiente código será suficiente:

Como vimos anteriormente, nuestro componente debe tener los 2 componentes que vienen de Formik para poder funcionar adecuadamente: Field y ErrorMessage .

Ahora añadiremos la validación con nuestro esquema, junto con un mensaje que limite el campo a 255 caracteres.

Probamos nuestro campo y vemos que el mensaje se muestra correctamente cuando excedemos el límite de 255 caracteres:

Para añadir los campos restantes seguiremos los pasos de manera similar, crearemos los valores iniciales para cada campo:

const initialValues: FormValues = {
...
  technologies: [],
  receive_notifications: false,
  coding_frequency: "",
};

Y añadiremos nuestro JSX para cada campo:

Nuestro esquema de validación tendrá ahora la siguiente estructura:

{
...
  technologies: yup
    .array()
    .required(isRequiredMessage)
    .min(1, minTechnologyMessage),
  coding_frequency: yup.string().required(isRequiredMessage),
  receive_notifications: yup.string().required(isRequiredMessage),
}

Al hacer submit sin haber completado nuestro campos, se verá de la siguiente manera:

Y al completar los campos:

Podemos ver los valores enviados en el alert:

Genial! Finalmente nuestro formulario funciona correctamente, y hemos aprendido a utilizar distintos tipos de inputs con sus respectivas validaciones.

Espero que este post les haya gustado y les sea de utilidad como una guia de inicio para entender mejor el funcionamiento de Formik con React y Typescript.

Les comparto también el enlace al repositorio donde pueden revisar el código https://github.com/scottgamer/formik-form

Si les gusto no olviden dejar su reacción y compartirlo 😄