React Hook Form & Related Things

References

Official Docs Github Repo
Nên dùng zod để quản lý validation, nó cũng cho phép tạo schema xong generate type dựa trên schema này. Shacdn dùng nó mặc định

Decorate input border when there is error (with Shadcn’s form)

Để decorate của Slot bên trong FormControl có tác dụng lên Input thì phải để Input ngay trong FormControl

<Slot
  // other properties
  className={cn(error && 'border-destructive')}
/>

<FormControl>
  <Input /> // make sure Input is a direct child of FormControl
</FormControl>

Nested Form Array nhưng index không update UI đúng như code

Nếu dùng console.log thì update đúng, còn trong UI thì lại không đúng. VD remove clicked thì index cuối luôn bị remove (UI) thay vì ngay cái index clicked Lỗi tại key = {}

const { fields: nestedFields } = useFieldArray({ control, name});

// ...
{nestedFields.map((nestedItem, index) => (
  <NestedItem key={nestedITem.id} /> // should be .id
))}

Custom validator

Check this example

Nếu như `form` không tự validate (chỉ sau khi submit mới validate)

Check xem có thêm { ...field } vào trong form chưa

<FormControl>
  <Input placeholder='Enter something...' { ...field }
</FormControl>