ช่องฟอร์มแบบไดนามิกด้วย useFieldArray

ยินดีต้อนรับ

useFieldArray คืออะไร

import { useFieldArray } from 'react-hook-form';

const { fields, append, remove } = useFieldArray({
  control,
  name: 'phoneNumbers',
});

การตั้งค่า: control จาก useForm

const { register, control, handleSubmit } = useForm({
  defaultValues: { phoneNumbers: [{ value: '' }] },
});

การเรนเดอร์ฟิลด์

return fields.map((field, index) => (
  <div key={field.id}>
    <input
      {...register(`phoneNumbers.${index}.value`)}
    />
    <button onClick={() => remove(index)}>Remove</button>
  </div>
));

การเพิ่มฟิลด์ใหม่ต่อท้าย

<button onClick={() => append({ value: '' })}>
  Add Phone Number
</button>

การลบฟิลด์

<button onClick={() => remove(index)}>Delete</button>

การตรวจสอบจำนวนฟิลด์ขั้นต่ำ

const schema = z.object({
  emails: z.array(z.object({ value: z.string().email() }))
           .min(1, 'At least one email required'),
});

การสลับและย้ายฟิลด์

swap(0, 2); // swap first and third items
move(3, 0); // move item at index 3 to the top

การใช้ useFieldArray ซ้อนกัน

การส่งข้อมูลอาร์เรย์

const onSubmit = (data) => {
  console.log(data.phoneNumbers);
  // [{ value: '555-1234' }, { value: '555-5678' }]
};

ตรวจสอบความเข้าใจ

สรุปทบทวน

จบหลักสูตร