React Hook Form: Xây dựng form component - Part 3

Trong bài viết này, mình sẽ hướng dẫn tích hợp Yup vào form component. Thực sự không quá khó nếu bạn làm được ví dụ qua 2 bài viết trước.

Yup là gì?

Yup là một thư viện JavaScript cho việc kiểm tra dữ liệu và xác thực dữ liệu trong ứng dụng React

Tích Hợp Yup vào React Hook Form

React Hook Form được thiết kế để hoạt động mượt mà với các thư viện schema validation như Yup thông qua các "resolver"

npm install yup @hookform/resolvers

Ví dụ

File Structure

src/
├── types/
│   ├── formFields.ts           # Defines the overall form data structure
├── validation/
│   └── formSchemas.ts          # Yup validation schemas
├── components/
│   ├── DynamicForm.tsx         # Main form component, integrates Yup
│   ├── UserInfo.tsx            # Child component for user information
│   └── AddressInfo.tsx 
└── App.tsx

Khai báo formSchema

// src/validation/formSchemas.ts
import * as yup from 'yup';

// Define schema for UserInfoData
const userInfoSchema = yup.object().shape({
  firstName: yup.string()
    .required("Họ không được để trống.")
    .min(2, "Họ phải có ít nhất 2 ký tự."),
  lastName: yup.string()
    .required("Tên không được để trống.")
    .min(2, "Tên phải có ít nhất 2 ký tự."),
  email: yup.string()
    .email("Email không đúng định dạng.")
    .required("Email không được để trống."),
  phone: yup.string()
    .required("Số điện thoại không được để trống.")
    .matches(/^[0-9]{10,11}$/, "Số điện thoại phải là 10 hoặc 11 chữ số."), 

  profileImage: yup.mixed<FileList>()
    .test('fileRequired', 'Ảnh đại diện là bắt buộc.', (value) => {
      return value && value.length > 0;
    })
    .test('fileType', 'Chỉ cho phép file ảnh.', (value) => {
        if (!value || value.length === 0) return true;
        const file = value[0];
        return ['image/jpeg', 'image/png', 'image/gif', 'image/bmp'].includes(file.type);
    })
    .test('fileSize', 'Kích thước ảnh tối đa 5MB.', (value) => {
        if (!value || value.length === 0) return true; 
        const file = value[0];
        return file.size <= 5 * 1024 * 1024; // 5MB
    }),
});

// Define schema for AddressInfoData
const addressInfoSchema = yup.object().shape({
  street: yup.string()
    .required("Số nhà, đường không được để trống."),
  city: yup.string()
    .required("Thành phố không được để trống."),
  zipCode: yup.string()
    .required("Mã bưu chính không được để trống.")
    .matches(/^[0-9]{5,6}$/, "Mã bưu chính phải là 5 hoặc 6 chữ số."),
  country: yup.string()
    .required("Quốc gia không được để trống."),
});

// Define the OVERALL schema for ComplexFormData
export const complexFormValidationSchema = yup.object().shape({
  userInfo: userInfoSchema,
  address: addressInfoSchema,
});

Khai báo Yup trong DynamicForm

import { yupResolver } from '@hookform/resolvers/yup';
import { complexFormValidationSchema } from '../../validation/formSchema';

const DynamicForm = () => {
    const { register, handleSubmit, control, formState: { errors } } = useForm<ComplexFormData>({
      resolver: yupResolver(complexFormValidationSchema),//add here

Code DynamicForm

import { useForm, type SubmitHandler } from 'react-hook-form';
import type { ComplexFormData } from '../../types/formFields';
import UserInfo from './UserInfo';

import { yupResolver } from '@hookform/resolvers/yup';
import { complexFormValidationSchema } from '../../validation/formSchema';

const DynamicForm = () => {
    const { register, handleSubmit, control, formState: { errors } } = useForm<ComplexFormData>({
      resolver: yupResolver(complexFormValidationSchema),
      defaultValues: {
        userInfo: { firstName: '', lastName: '', email: '', phone: '' },
        address: { street: '', city: '', zipCode: '', country: '' },
      }
    });
    const onSubmit: SubmitHandler<ComplexFormData> = (data: ComplexFormData) => {
        console.log("Form submitted:", data);

    const profileImageFile = data.userInfo.profileImage?.[0];
    if (profileImageFile) {
        console.log("Image name:", profileImageFile.name);
        console.log("Size of image:", profileImageFile.size, "bytes");
        console.log("File type:", profileImageFile.type);

        const formData = new FormData();
        formData.append('firstName', data.userInfo.firstName);
        formData.append('lastName', data.userInfo.lastName);
        formData.append('email', data.userInfo.email);
        formData.append('phone', data.userInfo.phone);
        formData.append('street', data.address.street);
        formData.append('city', data.address.city);
        formData.append('zipCode', data.address.zipCode);
        formData.append('country', data.address.country);
        
        if (profileImageFile) {
            formData.append('profileImage', profileImageFile);
        }
        
        try {            
            alert('Data was sent!');
        } catch (error) {
            console.error(error);           
        }

    } 
    };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="container mt-5">
      <h2 className="mb-4">Simple Dynamic Form</h2>
      <UserInfo register={register} errors={errors} control={control} />      

      <button type="submit" className="btn btn-primary">
        Submit
      </button>
    </form>
  );
}

export default DynamicForm;

Ở file UserInfo.tsx, xóa đoạn required trong mỗi input

import React from 'react';
import type { UseFormRegister, FieldErrors, Control } from 'react-hook-form';
import type { ComplexFormData, FormField } from '../../types/formFields';

interface UserInfoProps {
    register: UseFormRegister<ComplexFormData>;
    errors: FieldErrors<ComplexFormData>;
    control: Control<ComplexFormData>;
}

const UserInfo : React.FC<UserInfoProps> = ({ register, errors, control }) => {
    const userInfoFields: FormField[] = [
        { label: 'Họ', name: 'userInfo.firstName', type: 'text', placeholder: 'Nguyễn' },
        { label: 'Tên', name: 'userInfo.lastName', type: 'text', placeholder: 'Văn A' },
        { label: 'Email', name: 'userInfo.email', type: 'email', placeholder: 'email@example.com' },
        { label: 'Số điện thoại', name: 'userInfo.phone', type: 'tel', placeholder: '0123-456-789' },
        { label: 'Ảnh đại diện', name: 'userInfo.profileImage', type: 'file', placeholder: '' },
    ];
    return (<>
        <h2>User Info</h2>
        <div className="card mb-4">
            <div className="card-header bg-info text-white">User Information</div>
            <div className="card-body">
                {userInfoFields.map((field) => 
                    (
                        <div>
                            <label htmlFor='{field.name}' className="form-label">{field.label}</label>
                            <input id={field.name}
                                type={field.type} 
                                placeholder={field.placeholder} 
                                {...register(field.name as `userInfo.${keyof ComplexFormData['userInfo']}`)} 
                                className="form-control"
                                />
                            {errors.userInfo?.[field.name.split('.')[1] as keyof ComplexFormData['userInfo']] && (
                                        <div className="text-danger mt-1">{errors.userInfo?.[field.name.split('.')[1] as keyof ComplexFormData['userInfo']]?.message}</div>
                                      )}
                        </div>

                    ))
                }
            </div>
        </div>
    </>);
}

export default UserInfo;