Thiết kế và quản lý form đơn giản với thư viện Formik

Để giúp người dùng quản lý form dễ dàng hơn, thư viện Formik đã ra đời với rất nhiều tính năng hữu ích. Tuy nhiên, trong quá trình sử dụng Formik, người dùng có thể gặp phải một số vấn đề cần lưu ý để có thể khắc phục và sử dụng thư viện hiệu quả hơn.

Trong bài viết này, chúng ta sẽ tìm hiểu về cách cài đặt, các tính năng của Formik và những vấn đề thường gặp khi sử dụng thư viện này.

I. Formik là gì ?

Formik là một thư viện quản lý form trong React. Nó cung cấp các tính năng như quản lý state của form, validation và xử lý submit form. Formik giúp cho việc quản lý form trong React trở nên đơn giản hơn, giảm thiểu lượng code cần phải viết và tăng tính hiệu quả cho quá trình phát triển ứng dụng.

Tại sao chúng taneen sử dụng Formik ?

Đơn giản và dễ sử dụng: Formik giúp giảm thiểu lượng code phải viết để quản lý form trong React. Nó cung cấp các API và tính năng đơn giản để quản lý state của form và validation.

Bài viết này được đăng tại [free tuts .net]

Tính linh hoạt: Formik cho phép bạn tuỳ chỉnh các tính năng của nó dựa trên nhu cầu của ứng dụng của bạn. Nó cho phép bạn sử dụng các trình kiểm tra validation bên ngoài và các thư viện giao diện khác để tạo giao diện form đẹp hơn.

Hỗ trợ cho việc xử lý submit form: Formik cho phép xử lý submit form với các API đơn giản và hỗ trợ các tính năng như validation trước khi submit và xử lý submit form bất đồng bộ.

Tương thích với các thư viện giao diện khác: Formik tương thích với các thư viện giao diện khác như Material UI, Bootstrap, React-Bootstrap, Ant Design, v.v.

Được cộng đồng ưa chuộng: Formik là một thư viện được ưa chuộng trong cộng đồng React và nhận được sự hỗ trợ từ các nhà phát triển khác. Nếu bạn gặp vấn đề trong quá trình sử dụng Formik, bạn có thể tìm kiếm giải pháp trên các diễn đàn, trang web hỗ trợ hoặc các công cụ khác.

II. Cài đặt và sử dụng Formik

Cài đặt Formik vào dự án của bạn thông qua npm hoặc yarn

npm install formik

hoặc

yarn add formik

Tạo một form và sử dụng Formik để quản lý state và validation của form

Đầu tiên, import Formik và Form từ thư viện formik vào component của bạn.

import { Formik, Form } from 'formik';

Sử dụng Formik để quản lý state và validation của form

Bạn cần truyền vào initial values của form, và validation schema (nếu có) vào prop initialValues và validationSchema của component Formik. Ngoài ra, bạn cũng cần truyền vào hàm handleSubmit để xử lý submit form.

<Formik
  initialValues={{ name: '', email: '', password: '' }}
  validationSchema={/* validation schema */}
  onSubmit={/* handle submit */}
>
  {({ errors, touched }) => (
    <Form>
      {/* form fields */}
    </Form>
  )}
// https://freetuts.net
</Formik>

Sử dụng các API của Formik để quản lý state và validation của form

Ví dụ, để quản lý giá trị của một trường input, bạn có thể sử dụng component Field của Formik.

<Field name="name" />

Sử dụng các props của Field để quản lý state và validation của trường input

Ví dụ, để hiển thị lỗi validation của trường input, bạn có thể sử dụng props errors và touched của Field.

<Field name="name" />
// https://freetuts.net
{errors.name && touched.name && <div>{errors.name}</div>}

Sử dụng hàm handleSubmit được truyền vào prop onSubmit của component Formik

<Formik
  initialValues={{ name: '', email: '', password: '' }}
  validationSchema={/* validation schema */}
  onSubmit={(values) => {
    // handle submit here
  }}
>
  {({ errors, touched }) => (
    <Form>
      {/* form fields */}
      <button type="submit">Submit</button>
    </Form>
  )} 
// https://freetuts.net
</Formik>

Trên đây là các bước cơ bản để cài đặt và sử dụng Formik trong dự án của bạn. Bạn có thể tìm hiểu thêm về các tính năng và API của Formik tại trang chủ của nó.

II. Tạo form đơn giản với Formik

Tạo một component Formik và sử dụng Formik để quản lý state và validation của form đó. Bạn cần truyền vào initial values của form, và validation schema (nếu có) vào prop initialValues và validationSchema của component Formik. Ngoài ra, bạn cũng cần truyền vào hàm handleSubmit để xử lý submit form.

<Formik
  initialValues={{ name: '', email: '', password: '' }}
  validationSchema={/* validation schema */}
  onSubmit={(values) => {
    // handle submit here
    // https://freetuts.net
  }}
> 

Trong đó:

`initialValues`: là đối tượng chứa giá trị khởi tạo ban đầu của form. Trong trường hợp này, form của chúng ta có 3 trường là name, email, password, ta sẽ khởi tạo giá trị ban đầu của chúng bằng { name: '', email: '', password: '' }.

`validationSchema`: là một object sử dụng để validate các trường input. Bạn có thể sử dụng thư viện Yup để định nghĩa các schema validation, như Yup.string().required('Vui lòng nhập tên').

`onSubmit`: là một hàm được gọi khi form được submit. Giá trị được truyền vào là object chứa giá trị của các trường input.

Tiếp theo, bên trong component Formik, bạn cần truyền vào children là component Form và các trường input Field của form đó.

{({ errors, touched }) => (
    <Form>
      <Field name="name" />
      {errors.name && touched.name ? (
        <div>{errors.name}</div>
      ) : null}
      <Field name="email" />
      {errors.email && touched.email ? (
        <div>{errors.email}</div>
      ) : null}
      <Field name="password" type="password" />
      {errors.password && touched.password ? (
        <div>{errors.password}</div>
      ) : null}
      <button type="submit">Submit</button>
    </Form>
// https://freetuts.net
  )}

Trong đó:

`Form`: là một component được cung cấp bởi Formik, dùng để bọc các trường input của form.

`Field`: là một component được cung cấp bởi Formik, dùng để render các trường input của form. Trong đó, bạn cần truyền vào prop` name` để Formik có thể quản lý giá trị của trường input này. Bạn cũng có thể sử dụng các props khác như `type`, `placeholder`, và `onChange` để tùy chỉ

IV. Các tính năng của Formik

Formik là một thư viện quản lý form trong React, cung cấp các tính năng giúp cho việc quản lý và xử lý form trở nên dễ dàng hơn.

Dưới đây là các tính năng chính của Formik:

Validation Schema

Formik cung cấp một cách để kiểm tra và xác thực dữ liệu nhập vào từ form bằng cách sử dụng Yup validation schema. Yup là một thư viện validation schema dễ sử dụng, cho phép xác thực các giá trị của các trường input trong form.

Ví dụ, để kiểm tra một trường input email, bạn có thể sử dụng Yup schema như sau:

import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
  email: Yup.string().email().required(),
  password: Yup.string().required(),
});
 // https://freetuts.net

Bạn có thể định nghĩa các trường input trong form và các validation schema cho chúng, và Formik sẽ tự động xác thực chúng khi người dùng nhập dữ liệu vào form.

Submitting Form

Khi người dùng submit form, Formik cung cấp các hàm và props giúp bạn xử lý các giá trị trong form.

Ví dụ, để xử lý khi người dùng submit form, bạn có thể sử dụng hàm handleSubmit như sau:

const handleSubmit = (values) => {
  console.log(values);
// https://freetuts.net
}

Trong đó, values là đối tượng chứa các giá trị được nhập vào từ form. Bạn có thể sử dụng giá trị này để gửi lên server hoặc xử lý dữ liệu.

Handling Asynchronous Form Submissions

Nếu bạn cần xử lý các form submission bất đồng bộ, Formik cung cấp một số tính năng giúp bạn làm việc này dễ dàng hơn.

Ví dụ, để xử lý form submission bất đồng bộ, bạn có thể sử dụng hàm handleSubmit như sau:

const handleSubmit = async (values) => {
  try {
    await submitForm(values); // Gọi hàm xử lý submit form bất đồng bộ
    console.log('Submit form thành công!');
  } catch (error) {
    console.error('Submit form thất bại!', error);
  }
// https://freetuts.net
}

Trong đó, submitForm là một hàm xử lý form submission bất đồng bộ, và bạn sử dụng await để đợi cho việc submit form hoàn thành. Nếu có lỗi xảy ra, bạn có thể bắt lỗi bằng cách sử dụng câu lệnh catch.

Những tính năng trên là các tính năng chính của Formik, giúp cho việc quản lý và xử lý form trở nên dễ dàng hơn.

V. Tạo giao diện form đẹp hơn với Material UI

Material UI là một thư viện UI cho React được sử dụng rộng rãi và cung cấp nhiều thành phần UI tốt nhất để xây dựng giao diện đẹp và chuyên nghiệp. Kết hợp với Formik, ta có thể tạo ra giao diện form đẹp hơn và tiện dụng hơn.

Dưới đây là các bước để tạo giao diện form đẹp hơn với Material UI và Formik:

Cài đặt Material UI

Để sử dụng Material UI trong dự án của bạn, bạn cần cài đặt nó bằng cách sử dụng npm hoặc yarn:

npm install @material-ui/core

hoặc

yarn add @material-ui/core

Tạo form sử dụng các thành phần Material UI

Ví dụ, để tạo một form đăng ký đơn giản với các trường như tên, email, mật khẩu và xác nhận mật khẩu, ta có thể sử dụng các thành phần của Material UI như sau:

import React from "react";
import { TextField, Button } from "@material-ui/core";
import { Formik, Form } from "formik";
import * as Yup from "yup";

const validationSchema = Yup.object().shape({
  name: Yup.string().required("Tên không được để trống"),
  email: Yup.string().email("Email không hợp lệ").required("Email không được để trống"),
  password: Yup.string().required("Mật khẩu không được để trống"),
  confirmPassword: Yup.string()
    .oneOf([Yup.ref("password")], "Mật khẩu không khớp")
    .required("Xác nhận mật khẩu không được để trống"),
});

const SignupForm = () => {
  return (
    <Formik
      initialValues={{
        name: "",
        email: "",
        password: "",
        confirmPassword: "",
      }}
      validationSchema={validationSchema}
      onSubmit={(values) => {
        alert(JSON.stringify(values, null, 2));
      }}
    >
      {({ errors, touched }) => (
        <Form>
          <TextField
            name="name"
            label="Tên"
            error={errors.name && touched.name}
            helperText={errors.name}
            fullWidth
            margin="normal"
          />
          <TextField
            name="email"
            label="Email"
            error={errors.email && touched.email}
            helperText={errors.email}
            fullWidth
            margin="normal"
          />
          <TextField
            name="password"
            label="Mật khẩu"
            type="password"
            error={errors.password && touched.password}
            helperText={errors.password}
            fullWidth
            margin="normal"
          />
          <TextField
            name="confirmPassword"
            label="Xác nhận mật khẩu"
            type="password"
            error={errors.confirmPassword && touched.confirmPassword}
            helperText={errors.confirmPassword}
            fullWidth
            margin="normal"
          />
          <Button type="submit" variant="contained" color="primary">
            Đăng ký
          </Button>
        </Form>
      )}
    </Formik>
  );
};
// https://freetuts.net
export default SignupForm;

Ở đây, ta sử dụng component TextField để thay thế cho input field. Ta truyền các props như label, variant, margin, fullWidth để thiết kế giao diện cho TextField. Các props này được giải thích như sau:

label: Nhãn hiển thị bên cạnh TextField.

variant: Kiểu thiết kế của TextField. Có thể là standard, outlined hoặc filled.

margin: Khoảng cách giữa TextField và các phần tử xung quanh. Có thể là none, dense hoặc normal.

fullWidth: TextField chiếm đầy khung.

Tương tự, ta có thể sử dụng các component khác của Material UI để thiết kế giao diện cho form của mình.

Với Material UI, chúng ta có thể tùy biến các component để đáp ứng nhu cầu thiết kế của mình một cách dễ dàng và linh hoạt.

VI. Các lưu ý khi sử dụng Formik

Khi sử dụng Formik, có một số lưu ý sau đây bạn cần lưu ý để đảm bảo ứng dụng của bạn hoạt động tốt:

1. Cần nắm vững cách xử lý validation schema và validation function trong Formik để đảm bảo dữ liệu được xử lý đúng cách và tránh lỗi.

2. Nên sử dụng các tính năng đi kèm của Formik như yup để xác thực dữ liệu, hoặc useField để tái sử dụng các trường dữ liệu trong form.

3. Khi sử dụng Formik với các thư viện UI như Material UI, cần tìm hiểu kỹ các component và props hỗ trợ để tạo giao diện form đẹp hơn.

4. Nếu sử dụng Formik với các chức năng đa luồng, cần hiểu cách xử lý submit và các hàm liên quan để tránh gây ra lỗi khi submit form.

Kết Luận

Sử dụng thư viện Formik là một cách tiện lợi và hiệu quả để quản lý và xử lý form trong ứng dụng web. Formik cung cấp nhiều tính năng hỗ trợ xử lý dữ liệu, validation, submit form và xử lý các chức năng đa luồng. Kết hợp với các thư viện UI như Material UI, ta có thể tạo ra giao diện form đẹp hơn và dễ sử dụng hơn cho người dùng. Tuy nhiên, khi sử dụng Formik, cần nắm vững cách sử dụng các tính năng và lưu ý để tránh gây ra lỗi và đảm bảo hiệu quả trong việc quản lý form.

Những vấn đề hay gặp phải khi sử dụng Formik

1. Validation không hoạt động đúng cách:

Điều này thường xảy ra khi validation schema hoặc validation function không được cấu hình đúng cách. Vì vậy, cần kiểm tra lại các tùy chọn validation và đảm bảo rằng các giá trị được xử lý đúng cách.

2. Submit không hoạt động đúng cách:

Một số vấn đề về submit form có thể gặp phải bao gồm không có phản hồi từ API hoặc việc lặp lại submit form. Điều này có thể được giải quyết bằng cách kiểm tra các hàm liên quan đến submit form và các tham số được sử dụng.

3. Tái sử dụng các trường dữ liệu trong form:

Khi sử dụng Formik, nhiều người dùng gặp phải vấn đề khi tái sử dụng các trường dữ liệu trong form. Để giải quyết vấn đề này, ta có thể sử dụng tính năng useField của Formik để tái sử dụng các trường dữ liệu. Tuy nhiên, ta cần đảm bảo rằng các props được định nghĩa đúng cách và đảm bảo tính nhất quán trong toàn bộ form.