Formik: Library ajaib untuk memproses form dengan mudah

Mengingat dari tulisan sebelumnya kita dapat memproses form dengan berbagai macam cara, ada cara yang lebih mudah lagi untuk memproses sebuah form yakni dengan menggunakan Formik.

Instalasi

Untuk memproses form di contoh pertama dengan menggunakan Formik, kita perlu menginstal library Formik terlebih dahulu dengan perintah npm install formik. Kemudian, kita dapat mengimpor Formik dan menggunakannya dalam komponen kita sebagai berikut:

1. Pertama-tama, kita perlu meng-wrap komponen form kita dengan <Formik> dan menambahkan props initialValues yang berisi objek dengan nama-nama field form sebagai properti dan nilai awal sebagai nilai dari properti tersebut.
2. Selanjutnya, kita perlu menggunakan <Field> untuk setiap input dalam form kita. <Field> akan menerima props name yang sesuai dengan nama field yang ditentukan dalam initialValues, dan component yang akan digunakan untuk menampilkan input.
3. Kita juga perlu menambahkan event handler onSubmit pada <form> yang akan digunakan untuk menangani submit form. Fungsi ini akan menerima satu argumen yang berisi objek dengan properti-properti yang sesuai dengan nama field form.
4. Kita juga dapat menambahkan validasi pada form dengan menambahkan prop validationSchema pada <Formik> dan membuat objek yup yang akan digunakan untuk validasi.
5. Kita juga dapat menambahkan error handling, loading state dan lainnya dengan menambahkan beberapa props pada <Formik>
6. Sekarang, kita dapat mengakses nilai form dan menangani event form dengan lebih mudah menggunakan Formik.

Contoh kode

Tanpa validasi

Berikut contoh kode formik tanpa valudasi:

import React from 'react';
import { Formik, Form, Field } from 'formik';

const LoginForm = () => {

  const handleSubmit = (values, { setSubmitting }) => {
    console.log('Email:', values.email);
    console.log('Password:', values.password);
    setSubmitting(false);
    // Tulis kode lainnya disini, seperti mengirimkan request menggunakan axios
  };

  return (
    <Formik
      initialValues={{ email: '', password: '' }}
      onSubmit={handleSubmit}
    >
      {({ isSubmitting }) => (
        <Form>
          <label>
            Email:
            <Field type="email" name="email" />
          </label>
          <br />
          <label>
            Password:
            <Field type="password" name="password" />
          </label>
          <br />
          <button type="submit" disabled={isSubmitting}>
            Login
          </button>
        </Form>
      )}
    </Formik>
  );
};

export default LoginForm;

Dengan validasi

Validasi juga bisa dilakukan dengan menambahkan package yup dengan perintah npm install yup. Kemudian, kita dapat mengimpor yup dan membuat schema di dalam komponen, contoh kodenya sebagai berikut:

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const LoginForm = () => {
  const validationSchema = Yup.object().shape({
    email: Yup.string()
      .email('Invalid email address')
      .required('Email is required'),
    password: Yup.string()
      .min(8, 'Password must be at least 8 characters')
      .required('Password is required'),
  });

  const handleSubmit = (values, { setSubmitting }) => {
    console.log('Email:', values.email);
    console.log('Password:', values.password);
    setSubmitting(false);
    // Tulis kode lainnya disini, seperti mengirimkan request menggunakan axios
  };

  return (
    <Formik
      initialValues={{ email: '', password: '' }}
      validationSchema={validationSchema}
      onSubmit={handleSubmit}
    >
      {({ isSubmitting }) => (
        <Form>
          <label>
            Email:
            <Field type="email" name="email" />
            <ErrorMessage name="email" component="div" />
          </label>
          <br />
          <label>
            Password:
            <Field type="password" name="password" />
            <ErrorMessage name="password" component="div" />
          </label>
          <br />
          <button type="submit" disabled={isSubmitting}>
            Login
          </button>
        </Form>
      )}
    </Formik>
  );
};

export default LoginForm;

Pada contoh di atas, form di-wrap oleh komponen <Formik>, dan nilai awal dari field form diteruskan sebagai props initialValues. Skema validasi ditentukan menggunakan library Yup dan diteruskan sebagai props validationSchema. Fungsi handleSubmit diteruskan sebagai props onSubmit dan akan dipanggil saat form dikirim, dengan nilai form dan props tambahan seperti setSubmitting.

Elemen form diganti dengan komponen <Field>, yang menerima props name yang sesuai dengan nama field dalam objek initialValues dan props component untuk menampilkan input.

Kita juga dapat menambahkan error handling, state loading dan lainnya dengan menambahkan beberapa props pada <Formik>.

Pastikan untuk meng-import Formik, Yup dan library lain yang diperlukan pada file yang digunakan.

Penjelasan lebih jauh tentang yup

Pada contoh kode di atas, objek validationSchema didefinisikan menggunakan library Yup.

Yup.object().shape({...}) digunakan untuk membuat objek yang akan digunakan untuk validasi. Dengan shape, kita dapat menentukan properti-properti yang harus divalidasi pada objek tersebut.

Didalam objek tersebut, properti email di deklarasikan sebagai string yang harus sesuai dengan format email dengan menggunakan .email() . Jika tidak sesuai dengan format email maka akan mengeluarkan pesan error "Invalid email address" dan harus diisi dengan menggunakan .required('Email is required').

Sedangkan untuk properti password di deklarasikan sebagai string yang harus lebih dari 8 karakter dengan menggunakan .min(8, 'Password must be at least 8 characters') dan harus diisi dengan menggunakan .required('Password is required')

Secara keseluruhan, objek validationSchema ini digunakan untuk memvalidasi input dari form yang diterima oleh Formik dan memberikan feedback error sesuai dengan kondisi yang ditentukan.

Semoga Bermanfaat!