Тёмный

React Dynamic Form Tutorial | react-hook-form & zod 

Austin Shelby
Подписаться 2,3 тыс.
Просмотров 12 тыс.
50% 1

In this tutorial you will learn how to build a dynamic React.js form using react-hook-form, zod, and TypeScript.
CLONE REPOSITORY github.com/AustinShelby/Dynam...
We will be using the discriminated union validator by zod to build a dynamic form validation schema.
You will learn how to use that custom validation schema with react-hook-form to render dynamic inputs based on form state.
Timestamps:
00:00 Intro
00:40 Form validation schema
02:44 react-hook-form
04:34 Dynamic field
06:24 Submitting form
08:24 Outro

Наука

Опубликовано:

 

8 июл 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 24   
@athefirstletteraofthealpha769
Thank you, Austin. Your tutorial is very clear and helpful.
@koreandude
@koreandude Год назад
Appreciate the content Austin, subbed and liked! Hope you can continue to create more videos like this
@animanamit7543
@animanamit7543 Год назад
Great tutorial!! Your videos are really helpful while I'm learning to use Zod :)
@AustinShelby
@AustinShelby Год назад
Great to hear that Animan!
@johnc0de
@johnc0de Год назад
Amazing! Thank you for the content!
@socialultra7219
@socialultra7219 5 месяцев назад
cheers dude, I was struggling on this problem for a while, your content helped immensely
@AustinShelby
@AustinShelby 5 месяцев назад
Glat to have helped you solve your problem!
@LuisLarreaJr
@LuisLarreaJr 4 месяца назад
Great example. I had something similar when product had the bright idea to still show the fields but disabled. Apparently this really complicates things since now you have to disable the validation rules from triggering on disabled fields.
@arturpawelski321
@arturpawelski321 Год назад
thank you for help ,you are great teacher❤
@tosheen20
@tosheen20 Год назад
This is a great content, well done. Could you create a slightly complex examle. Lets say there is a drop down and first validation rule is that an option must be selected, it can not be null which is a first option. Depending on a selection different fields are displayed according to some logic. If for example email is selected from the drop down additional email field is displayed and it must be valid email. If telephone is selected then it must be valid phone number etc. I am curious to know how will zod schema look in that case because we have default null state for the drop down and in the case we have more drop downs with different "branching". Thank you.
@VinayKumarSupervisor
@VinayKumarSupervisor Год назад
Clean !😀... Thanks
@miketepes8208
@miketepes8208 Год назад
Thank you very much Sir. I learned a lot. I applied this to checkout page where checkbox is biling address is same with shipping address or not. Thank you very much
@AustinShelby
@AustinShelby Год назад
Hey Mike it's awesome to hear that this video helped you! Thanks for watching.
@rastaray6401
@rastaray6401 Год назад
How do you access errors on the email field? Accessing formstate.errors.email results in a "property does not exist" TypeScript error
@AustinShelby
@AustinShelby Год назад
TypeScript is correct in this case. If the checkbox is not checked there won't be a property email in the formState.errors object. To fix this, you have to first check if the object has the email key like this: "email" in formState.errors && formState.errors.email
@kakun7238
@kakun7238 18 дней назад
amazing thank you for this could you make one for the fields coming from the db or a json file
@HariKrishna-qh5zp
@HariKrishna-qh5zp Год назад
its a great tutorial Austin, however I strongly feel you must have adopted some design library as the implementation of Tailwind CSS made this look so clumsy and not on the point to what the video trying to convey. I mostly prefer MUI or Chakra UI for simple and elegant design of forms.
@AustinShelby
@AustinShelby Год назад
Thanks for watching Hari. While UI libraries like Material UI are useful for creating good looking designs quickly, they cause some extra complexity when integrating form libraries such as react-hook-form.
@HariKrishna-qh5zp
@HariKrishna-qh5zp Год назад
@@AustinShelby Thanks so much for your response. You are absolutely right. While I was working on a dynamic form similar to the one in the video, I had to disable form fields after checkbox however @Mui latest version's Checkbox is not allowing that functionality.
@acubesa
@acubesa 10 месяцев назад
This is great, but what if the form has over 20 fields, I would need to create a copy of it for every version, is there a more 'versatile' way of achieving this? Maybe when setting the definition of a type in the schema, can I co-require a field, instead of creating different possible versions of it? I'm new to zod as you can tell...
@acubesa
@acubesa 10 месяцев назад
Nevermind, I found a more dynamic way to do it, just creating the z.object with the diff, and merging the base schema, so I don't have to create copies for every version.
@AustinShelby
@AustinShelby 10 месяцев назад
@@acubesa I'm glad you found the solution for it and thanks for sharing it with everyone 👍
@Foused87
@Foused87 Год назад
Why you stopped making videos? Your videos are so helpful!
@AustinShelby
@AustinShelby Год назад
Honestly just pure laziness. I should just probably get back to it as people seem to be enjoying these videos.
Далее
How does ZOD work? Build it yourself!
14:12
Просмотров 11 тыс.
ОСКАР И ДЖОНИ БРОСИЛИ НАС 😭
01:00
React Hook Form - useFieldArray
16:59
Просмотров 71 тыс.
Multi-Step form with react-hook-form
24:07
Просмотров 42 тыс.
Zod + Generics is HEAVEN
4:41
Просмотров 55 тыс.
Zod Makes TypeScript Even Better
7:14
Просмотров 153 тыс.
Expando Forms in React Hook Form
18:37
Просмотров 9 тыс.
ПОКУПКА ТЕЛЕФОНА С АВИТО?🤭
1:00
S-Pen в Samsung достоин Золота #Shorts
0:38