React Hook Form

References

Official docs, Github repo.

Author

Nên dùng với zod để quản lý validation, nó cũng cho phép tạo schema xong rùi generate type dựa trên schema này. Shadcn 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

1// form.tsx
2<Slot
3  // other properties
4  className={cn(error && 'border-destructive')}
5/>

1<FormControl>
2  <Input /> // make sure Input is a direct child of FormControl
3</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 update đúng. Ví dụ remove clicked thì cái index cuối luôn bị remove (UI) thay vì ngay cái index clicked.

Lỗi tại key={}

1const { fields: nestedFields } = useFieldArray({ control, name })
2
3// later in the codes
4{nestedFields.map((nestedItem, nestedIndex) => (
5	<NestedItem key={nestedItem.id} /> // should be .id 	
6))}

Custom validator (1 field based on another filed, with zod) ← also customize path of errors

Check this example.

Nếu như form không tự update mà chỉ sau khi submit mới validate (dùng với shadcn chẳng hạn)

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

1<FormControl>
2  <Input placeholder="shadcn" {...field} />
3</FormControl>

Nên để {...field} đầu, trước

zod với react-hook-form: disable 1 control tuỳ thuộc vào 1 control khác (nếu active is true thì ko validate 1 control, ngược lại thì validate nó)

Check code in file options-wrapper.tsx của dự án rewrite.