บทที่ 11: React Hook Form

'use client';
import { useForm } from 'react-hook-form';

interface FormData {
  firstName: string;
  lastName: string;
  email: string;
}

export default function BasicForm() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormData>();

  const onSubmit = (data: FormData) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register('firstName', { required: 'ชื่อจำเป็น' })}
        placeholder="ชื่อ"
      />
      {errors.firstName && <p>{errors.firstName.message}</p>}

      <input
        {...register('lastName', { required: 'นามสกุลจำเป็น' })}
        placeholder="นามสกุล"
      />
      {errors.lastName && <p>{errors.lastName.message}</p>}

      <input
        {...register('email', {
          required: 'อีเมลจำเป็น',
          pattern: {
            value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
            message: 'รูปแบบอีเมลไม่ถูกต้อง'
          }
        })}
        placeholder="อีเมล"
        type="email"
      />
      {errors.email && <p>{errors.email.message}</p>}

      <button type="submit">ส่งข้อมูล</button>
    </form>
  );
}