Formik: Desarrollando formularios en React.

¿Qué dificultades nos encontramos cuando desarrollamos formularios en front? ¿Cómo podemos solventarlas cuando trabajamos con React?

La creación de formularios en el desarrollo front suele ser una tarea difícil.Son muchos los factores a tener en cuenta: cambios de los campos, validaciones, envío... Todas estas cosas aumentan notablemente el tiempo de desarrollo.

Por eso, en React, se ha popularizado la librería Formik para la gestión de formularios, que nos proporciona las herramientas suficientes para que podamos crearlos en nuestras aplicaciones de una manera rápida, sencilla y eficiente.

¿Por qué Formik y no Redux Form?

Formik es una librería declarativa, intuitiva y adaptable desarrollada por Jared Palmer. Es muy fácil de utilizar y, gracias a su reducido peso (tan solo 12.7 kB), es perfecta para nuestras aplicaciones. Gracias a ella, al desarrollar nuestros formularios, conseguiremos:

• Obtener los valores dentro y fuera del State del formulario.
• Validación y mensajes de error.
• Controlar el envío.

Aunque Redux Form no es una mala opción, hay dos razones importantes para decantarnos por Formik:

1. Como dice Dan Abramov: “El estado de un formulario es por naturaleza local y no es necesario que lo tengamos en nuestro estado de Redux”.
2. Al utilizar Redux por detrás, cada vez que pulsemos una tecla en un input (por ejemplo) todos los reductores serán invocados y, en aplicaciones grandes, podría generarnos problemas de rendimiento.

Empezando con Formik

A continuación voy a mostrar cómo instalar la librería y crear un sencillo formulario. Para instalar Formik en nuestro proyecto, tenemos dos opciones:

• Con NPM

npm install formik --save

• Con YARN

yarn add formik

Formulario usando el componente <Formik />

En este ejemplo, utilizaremos el componente <Formik />. La librería también pone a nuestra disposición el withFormik() HOC o el Hook useFormik(), aunque su autor nos recomienda no usarlos ya que no está pensado para la mayoría de casos de usos.

El componente <Formik /> es el que nos va a ayudar a construir nuestro formulario a través de sus props:

• component?: React.ComponentType<FormikProps<Values>>
• render: (props: FormikProps<Values>) => ReactNode (Deprecado desde la V.2.X)
• children?: React.ReactNode | (props: FormikProps<Values>) => ReactNode
• enableReinitialize?: Controla si se tiene que restablecer el formulario si cambia initialValues
• isInitialValid?: (Deprecado desde la V.2.X)
• initialErrors?: Errores iniciales en los campos.
• initialStatus?: Valor arbitrario para el estado inicial del formulario
• initialTouched?: Los campos que queremos como visitados al inicio del formulario
• initialValues: Los valores iniciales que tomarán nuestros campos
• onReset?: Función para resetear el formulario
• onSubmit: Función que se llamará al hacer submit del formulario
• validate?: Función que usaremos para validar el formulario
• validateOnBlur?: Validar el formulario cuando se lanza evento onBlur. True por defecto
• validateOnChange?: Validar el formulario cuando se lanza evento onChage. True por defecto
• validateOnMount?: Validar el formulario al montar el componente <Formik />. False por defecto
• validationSchema?: Opción especial para utilizar con la librería de validaciones Yup

Como vemos en las props, tenemos 2 opciones para renderizar nuestros formularios ya que render pasa a estar deprecada desde la versión 2.x:

1. <Formik component>
2. <Formik children>

Ambas opciones pasan las mismas props. En nuestro ejemplo utilizaremos la opción 2, pasando como children nuestro formulario. El componente que le pasemos al children recibirá ciertas props para utilizarlas según nos convengan. Nosotros utilizaremos algunas, pero en el siguiente enlace tenéis toda la documentación: Docs <Formik />.

Empezando con el código

Vamos a empezar a ver el ejemplo y su funcionamiento con un formulario muy básico para dar de alta un jugador de baloncesto.

import React from 'react';
import { Formik } from 'formik';
import { BasicForm } from '../../components';

const validation = values => {
 let errors = {};

 if (!values.name) {
   errors.name = 'Name is required!';
 } else if (values.name.length <= 1) {
   errors.name = 'Name has to be 1 character at less!';
 }
 if (!values.lastName) {
   errors.lastName = 'Last name is required!';
 }
 if (!values.team) {
   errors.team = 'Team is required!';
 }
 else if (values.team.length < 2) {
   errors.team = 'Team is required!';
 }
 if (!values.number) {
   errors.number = 'Number is required!';
 } else if (isNaN(values.number)) {
   errors.number = 'Must be a number!';
 }
 return errors;
}

const Basic = () => (
 <Formik
   initialValues={{
     name: '',
     lastName: '',
     number: '',
     position: 'pg',
     team: '',
   }}
   onSubmit={(values, actions) => {
     setTimeout(() => {
       console.log(values)
       console.log(actions)
       actions.setSubmitting(false);
     }, 2000);
   }}
   validate={validation}
 >
   {props => <BasicForm {...props} />}
 </Formik>
);

export default Basic;

Como observamos, hemos creado un componente funcional llamado Basic que será nuestro formulario. En él renderizamos el componente <Formik /> y le pasamos 3 propiedades:

• initialValues: Lo usamos para inicializar los valores de nuestro formulario. En nuestro caso serán los campos “name”, “lastName”, “number", “team" y “position" a los que asignamos un valor.
• onSubmit: Aquí pasaremos la función que queremos que se ejecute cuando hagamos submit del formulario. En nuestro ejemplo hemos añadido un ‘setTimeout’ para simular una petición al servidor y cambiaremos el valor de isSubmitting a false cuando termine la ejecución del submit.
• Validate: Pasamos una función con las validaciones que necesitamos en nuestro formulario.

Como children, estamos pasando un componente que se llama <BasicForm /> con las props que nos provee Formik.

import React from 'react';
import InputField from '../UI/InputField';

const BasicForm = ({ handleChange, handleSubmit, isSubmitting, resetForm, values, errors, touched }) => (
 <form onSubmit={handleSubmit}>
   <div className="colums">
     <div className="column is-full">
       <div className="field">
         <label className="label">Team</label>
         <div className="control">
           <input
             name="team"
             className="input"
             onChange={handleChange}
             value={values.team}
           />
         </div>
         {touched.team && errors.team && <p className="help is-danger">{errors.team}}
       </div>
     </div>
     <div className="column is-full">
       <InputField name="name" type="text" label="Player Name" />
     </div>
     <div className="column is-full">
       <InputField name="lastName" type="text" label="Player Last Name" />
     </div>
     <div className="column is-full">
       <InputField name="number" type="text" label="Number" />
     </div>
     <div className="column is-full">
       <div className="field">
         <label className="label">Position</label>
         <div className="control">
           <div className="select is-rounded">
             <select
               id="position"
               name="position"
               onChange={handleChange}
               value={values.position}
             >
               <option value="pg">Point Guard</option>
               <option value="sg">Shooting Guard</option>
               <option value="sf">Small Forward</option>
               <option value="pf">Power Forward</option>
               <option value="c">Center</option>
             </select>
           </div>
         </div>
       </div>
     </div>
     <div className="is-full">
       <div className="field is-grouped is-grouped-centered">
         <p className="control">
           <button
             className="button is-rounded is-primary"
             disabled={isSubmitting}
             type="submit"
           >
             Submit
           </button>
         
         <p className="control">
           <button
             className="button is-rounded is-danger"
             type="button"
             onClick={resetForm}
           >
             Reset
           </button>
         
       </div>
     </div>
   </div>
 </form>
)

export default BasicForm;

En el código anterior, vemos el componente donde tenemos los diferentes campos del formulario. Obtenemos por “object destructuring” las propiedades que nos provee Formik y que vamos a necesitar.

Puede parecer muy largo pero vamos a ir explicando poco a poco los detalles que realmente nos interesan. Por un lado, hemos añadido la etiqueta <form /> a nuestro formulario pasándole al evento onSubmit la función handleSubmit que nos da Formik a través de las props. Esta será la función que se ejecutará cuando pulsemos el botón submit del formulario y que, al final, acabará ejecutando la función que pasamos a la propiedad onSubmit en el código anterior.

En los botones estamos pasándole al atributo disabled del botón submit el boolean isSubmitting que se pondrá a true en el momento que el envío del formulario esté en progreso.

También tenemos un botón de reset al que le pasamos al evento onClick la prop resetForm que reiniciará los valores del formulario.

Ahora veamos el primer input de nuestro formulario que hará referencia al valor “team”:

<div className="field">
     <label className="label">Team</label>
     <div className="control">
       <input
         name="team"
         className="input"
         onChange={handleChange}
         value={values.team}
       />
     </div>
     {touched.team && errors.team && 
          <p className="help is-danger">{errors.team}}
</div>

Lo que nos interesa de este código es el evento onChange al que le pasaremos handleChange que lo hemos obtenido de las props recibidas de Formik. HandleChange es quien se encarga de cambiar el valor para el campo en el formulario y, para ello, es necesario que el input tenga el atributo “name” o “id” con el mismo nombre que la key que pusimos en initValue.

También vamos a pintar el error del campo en caso de que no pase la validación y comprobamos si existe un error para el campo “team” dentro del objeto errors que nos provee Formik.

Si controlamos el error de esta manera, puede que su comportamiento no sea el más adecuado. Si tenemos una validación sobre la longitud del campo, marcando error si tiene una longitud menor de 2 caracteres; cuando empecemos a escribir en el campo, y la longitud del valor sea inferior a 2, nos empezará a mostrar el error.

Para evitar ese comportamiento podemos usar la propiedad touched y, dependiendo de si queremos que lo pinte antes de dar al botón submit, podemos añadir también al evento onBlur la prop handleBlur que nos pondrá el campo como touched cuando suceda dicho evento.

Creando nuestro propio Input reutilizable

Formik también nos da la posibilidad de crear nuestros propios componentes. En este ejemplo, vamos a crear un input que sea reutilizable. Para ello, tenemos un componente llamado <InputField /> que tendrá el siguiente aspecto:

import React from 'react';
import { useField } from 'formik';

const InputField = ({ label, ...props }) => {
 const [field, meta] = useField(props);
 return (
   <div className="field">
     <label className="label">{label}</label>
     <div className="control">
       <input className="input" {...field} {...props} />
     </div>
     {meta.touched && meta.error
       && <p className="help is-danger">{meta.error}}
   </div>
 )
}

export default InputField;

En este componente ya hacemos uso de un Hook, que nos dispone la librería llamado useField().

Este Hook nos va a devolver una triple tupla. En nuestro caso solo vamos a usar 2 de los 3 valores que podemos obtener en el array que son field y meta.

En field tendremos un objeto que contiene:

• name: Nombre del campo
• checked?: Solo estará definido si pasamos en las props el campo como tipo radio o checkbox
• onBlur: Evento blur
• onChange: Evento change
• value: Valor del campo
• multiple?: Se pueden o no seleccionar valores múltiples

En meta tendremos un objeto que contiene metadata del campo:

• error?: Mensaje de error del campo
• initialError?: El error inicial en caso de que lo tenga
• initialTouched: Valor inicial del campo si está inicializado en initialTouched
• initialValue?: El valor inicial del campo en caso de haberlo inicializado en initialValues
• touched: Valor para saber si el campo ha sido tocado o no
• value: Valor del campo

Por tanto, al pasarle al <input /> tanto field como meta, estamos haciendo que nuestro componente de tipo input tenga dichas propiedades. No es necesario pasarle todas las propiedades (como se ve en el ejemplo) y podríamos configurarlo a nuestra manera, ya que nos puede interesar usar el evento onBlur en nuestro componente.

Gracias al uso de este Hook, tenemos la flexibilidad de poder configurar nuestros propios componentes de tipo Input, por ejemplo, y utilizarlos entre los distintos formularios que tengamos en la aplicación. Esto es una gran ventaja para no repetir código entre nuestros formularios.

Fases en el envío del formulario

Cada vez que pulsamos el botón de enviar el formulario, se ejecutarán las siguientes fases:

1. Pre-envío:

• Todos los campos pasan a estar touched.
• Se asigna la variable isSubmitting a true.
• Se incrementa submitCount una vez.

2. Validación:

• Se asigna la variable isValidating a true.
• Se lanza la validación de todos los campos.
• ¿Hay errores?
  • Sí: Se cancela el envío del formulario. Se asigna isValidating a false, se asignan los errores a la variable errors, se asigna isSubmitting a false.
  • No: Se asigna isSubmitting a false y se procede con el envío.

3. Envío:

• Se procede a lanzar nuestra función de envío.
• Tenemos que llamar a setSubmitting(false) en nuestra función para acabar con el ciclo de envío del formulario.

Conclusión

Como hemos visto a través de este ejemplo básico, Formik nos va a facilitar mucho nuestros desarrollos de formularios en aplicaciones con React, proveyéndonos de una API con una documentación muy clara y con ejemplos fáciles de entender.

Mi opinión es que la probéis para comprobar vosotros mismos las posibilidades que nos da. Para no hacer muy largo este post, no hemos hablado de la validación de formulario a través de otra librería como es Yup, con la que podremos crear nuestras validaciones a través de object schemas y que la misma documentación de Formik nos dice que se integra muy bien, ya que tiene una configuración especial para ella con la prop validationSchema.

Podéis ver el ejemplo del formulario online en el siguiente link: Basic Form.

Si te ha gustado esta entrada de blog y te has quedado con ganas de algún ejemplo más usando la librería (como puede ser usando las validaciones con Yup), anímate y déjanos un comentario si quieres un post sobre esto :).