I was sick when recording this so do me a favour and give the video a thumbs up 👍😂

@ismaeltinta6118

7 ай бұрын

haha, I gave it a thumps up

@WebDevEducation

7 ай бұрын

@@ismaeltinta6118 thank you sir! 😊

@molomekeys3938

5 ай бұрын

nevermind it's a wonderful vidoe thank you sir

@bhavyakothari635

5 ай бұрын

Definitely mate. What a great video and the way you quickly explained it. No BS just pinpointed. Great video man. +Subscribed.

When you set the account-type to 'company' and fill in the company name field, and then change the account-type to 'personal', and then submit the form, the company-name will still be logged in the console, even though the account-type is already changed to 'personal' and the company-name field is no longer exist. This is probably not a problem on most use-case, but I think this is worth noting.

hey man i just went back after realized I haven't thank you about how straight forward this was! Thank you.

I am really thankful for your consideration and hope that in near future you will bring the full stack course in next js sometime like ecommerce or expenses tracker or something like LinkedIn or anything you like where more and more concepts of front end and backend are covered.

Brilliant tutorial, explained really well - thanks a lot! Hands down the top guide for shadcn and forms out there!

Thank you very much, I finally managed to understand how to use these tools :)

Amazing it's exactly what I was looking for ❤

Thank you so much for sharing mate! I hope you get well very soon 🙌🙌

@WebDevEducation

7 ай бұрын

You're welcome man and thank you 😊🙏

Helpful! Thank you!

Thank you so much for suc a clear explanation!

What a great explanation! Subscribed!

@WebDevEducation

6 ай бұрын

Thank you 😊 🙏

Amazing video! Thank you so much 🙏🏼

Great video! Thank you a lot

Thank you very much for your effort to make a good explanation of the great content, It made I've more understanding in the Next JS form., finally subscribed and planned to get your course of NextJS on Udemy as well.

@WebDevEducation

4 ай бұрын

Thank you 🙏 my next js courses on udemy are still using the pages router at the moment but I'm working on updating them all to use the app router 🙏

Thanks man! ♥

it was really very helpfull man

Thanks a lot i am in the process of making my first react project and i looked everywhere for some good docs that explain how to make a custom validation and i couldn't find any, but you are not only showing us how, you are also explaining it step by step which is great for people like me who's first language isn't English, thanks a ton, also just a request can you show us how to upload more than one image file with typescript too? Thanks

it's so clear and useful. thank you

Great video !

Hi! Thank you so much for the tutorial, it's been very helpful for me as I'm currently building my first project using shadcn :) Will you also make a tutorial on using something like nodemailer to build on top of this example, so the contact form can be sent to an external email address?

Fantastic video, appreciate that you drop the code too. I think if you now went ahead and you did a part 2 implementing this with next-safe-actions and server validation you'd have a very robust modern implementation. It's how I implemented it and there's 0 content available for the full example.

Appreciate it Sir Thanks

Thank You😊

Love it straight to point but i make a vidoe with phn field with all the country code and validation

Very helpfull!

Good job 👏

Thank you very much

Hey great video! I was wondering how did you know where to "insert" the FormControl component in between the Select component anatomy? I've been working on the Combobox component and trying to make it work in a form. I've done a first version of it but yours with the Select seems cleaner.

Great Explanation!! Sir please can you post a full stack video with an extensive use of shadcn and shadcn form and use the PostgreSQL as a backend with prisma.

@WebDevEducation

7 ай бұрын

I'd love to do that - do a massive build similar to how sonny sangha does his videos / builds. Hopefully if I have more time in the future I can do more of those types of videos 🙏

Thnx for the lesson. Do you know how to make shadcn select to get focused on error? It happens correctly for input. But doesn't happen as expected in select and radio group.

hey how would you do the same for files im trying to do it but facing some difficulties itll be helpful if could give a sample. Thank you

how to set default value in shadcn select ?

You're the best

There are quite a few videos on shadcn on KZread but none of them go deep and show how some of the complex shadcn components are to be used, like Form for example. I hope you also do a video on the DatePicker shadcn component as well. It seems to have a problem regarding manually typing dates. For example if you want to select your birth date, then you'll have to click a lot of times to get to your birth year.

@WebDevEducation

3 ай бұрын

Already covered that in my shadcn ui calendar video 😊🙏

How do you validate data again in server function?

Does anyone know why I get a hydration error whenever I use more than a single FormField within the form?

how to show #contact section of a long page, after submitting form using server actions with js disabled. #contact section is at last of the page.

Hi Tom Philips I tested this form, it is rendering multiple times unnecessarily including “render” prop method and also entire component(page.tsx). When we use “react-hook-form” it manages form state internally, but here re-renders happening on every keystroke. Could please help me how to avoid unnecessary re-renders?

HelloHi, what would be your approach if you wanted the text field to be filled from a variable instead of typing it manually, I made some attempts and it shows it correctly in the front end ( value={var} ), but when I submit the form it tells me that it is empty.

@WebDevEducation

5 ай бұрын

It sounds like what you need is to set the fields default value.

Can you do same without ShadeCDN. this is so cool

Triggering Select Button hides the Scrollbar. How to avoid this behaviour ?

Hi and thx How to reset the form after submission ?

@ruanxun9454

3 ай бұрын

in the function handleSubmit, I write form.reset() to clear all the inputs, but I am still a newbie, it may not be the best way.

8:49 intellisense is not working, Any solution?

That was great! but how can I do a server action?

@WebDevEducation

5 ай бұрын

As far as I'm aware this method will only work by calling the server action from the submit handler, rather than as the form action.

What about with inputs other than string? numbers, dates, bigint? I'm a little confused what the best way to handle this is in the Shadcn ui, zod, react-hook-form space is...

@user-cz9hx3ox1u

6 ай бұрын

Check over the zod documentation

@codyoakes

6 ай бұрын

@@user-cz9hx3ox1u I have been looking over the zod docs, but it seems like the shadcn components make everything strings on submit (seems like this is a RHF behavior?) so the values can't be validated as numbers or dates in zod...were you able to get this to work? Any chance you can share a codepen/github repo? I'd love to see how it's done. Thanks!

@juan7114

5 ай бұрын

​@@codyoakesYou need to set the onChange value, if you need a number instead of string, just set onChange = ({target}) => field.onChange(field.value = +target.value) "+" Operator is a shorthand for Number(), so you can also use Number() if you want. Remember, input value is always a string, convert it to a number and then assign it to the field value.

What about file input or rich text editor 🤔 How ?

@WebDevEducation

4 ай бұрын

No different, same approach 🙏

Huh so I am still pretty new to web development and I realized that I don't really have much experience building forms. But this form management with ShadCN looks unnecessarily complicated - is it even more complicated if you decide not to use ShadCN and would build it with just React?

@WebDevEducation

5 ай бұрын

I'd say it's easier not to use shadcn or react hook form, but then for bigger forms it's a lot easier for your forms to become complicated. Once I learned the "rules" for building forms with shadcn and react hook form, I've found it so much easier to build and maintain forms but that's just me. If you're new to web dev I'd recommend trying to build as much as you can from scratch yourself before working with third party libs.

@tomich20

5 ай бұрын

So much inecessary boiler plate. What about creating a MultiSelect dropdown? u r screwed. anywho... U can use shadCn, Zod, and shadCn inputs just by using the {...register("element")}, there you wont need any of the stuff imported from . Keep away from it, is evil.🤪🤪

Is it possible to use shadcn for file input?

@WebDevEducation

5 ай бұрын

Yes should work :)

Just add a input type date, and everything breaks 😅

@user-cz9hx3ox1u

6 ай бұрын

I think that's a zod issue

why is a simple form so complex 😢😢

@WebDevEducation

3 ай бұрын

welcome to React 😂

@programwithalex

3 ай бұрын

lmao, thanks for the video btw@@WebDevEducation

Great video just want to ask when the user takes the steps: 1. He clicks on the company 2. Fills in the input 3. Switches back to personal 4. Sends So accoutType - personal is set, but companyName is also set... It also sends comapanyName... Is there any way to prevent this? I don't think this should be happening

@d4rzk252

3 ай бұрын

I just did this: .refine( (data) => { if (data.accountType === 'company') { return !!data.companyName } data.companyName = ''"

@WebDevEducation

3 ай бұрын

I would prefer to take the approach of on submit, just not sending the company name data etc to the server.

@d4rzk252

3 ай бұрын

@@WebDevEducation So I have to do this logic in the function and then submit it? Isn't there a way to do it through the zod that when this is active, this get deleted? Or just like this: if (values.accountType === 'personal') delete values.companyName console.log({ ...values }) ?

Build form is never easy, I think. This is just a simple form.

@WebDevEducation

7 ай бұрын

Using shadcn / zod / react-hook-form 100% makes it easier