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

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

Austin Shelby

1 год назад

11,710 Просмотров

In this tutorial you will learn how to build a dynamic React.js form using react-hook-form, zod, and TypeScript.

CLONE REPOSITORY https://github.com/AustinShelby/Dynamic-React-Form

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

Тэги:

#react-hook-form #zod #react #dynamic_form
Ссылки и html тэги не поддерживаются


Комментарии:

@acubesa
@acubesa - 02.09.2023 07:20

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...

Ответить
@PixiBoom
@PixiBoom - 03.06.2023 13:04

Clean !😀... Thanks

Ответить
@arturpawelski321
@arturpawelski321 - 26.05.2023 11:16

thank you for help ,you are great teacher❤

Ответить
@miketepes8208
@miketepes8208 - 26.04.2023 16:20

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

Ответить
@athefirstletteraofthealpha769
@athefirstletteraofthealpha769 - 17.02.2023 22:03

Thank you, Austin. Your tutorial is very clear and helpful.

Ответить
@Foused87
@Foused87 - 18.01.2023 01:55

Why you stopped making videos? Your videos are so helpful!

Ответить
@koreandude
@koreandude - 05.01.2023 21:47

Appreciate the content Austin, subbed and liked! Hope you can continue to create more videos like this

Ответить
@HariKrishna-qh5zp
@HariKrishna-qh5zp - 12.12.2022 10:45

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.

Ответить
@johnc0de
@johnc0de - 19.10.2022 19:41

Amazing! Thank you for the content!

Ответить
@tosheen20
@tosheen20 - 08.09.2022 23:23

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.

Ответить
@animanamit7543
@animanamit7543 - 14.08.2022 08:22

Great tutorial!! Your videos are really helpful while I'm learning to use Zod :)

Ответить