Next JS forms with Shadcn UI (the EASY way)

[@WebDevEducation]

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

[@dreamsachiever212]

haha, I gave it a thumps up

[@WebDevEducation]

@@dreamsachiever212 thank you sir! 😊

[@molomekeys3938]

nevermind it's a wonderful vidoe thank you sir

[@bhavyakothari635]

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

[@rembautimes8808]

I have a thumbs up though I code in Angular and use Angular Material. Would ShadCN make a good kids name though 😂?

[@eric_so_good]

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

[@arihantkamde9985]

Thanks for making this concept crystal clear.

[@unnikuttan9637]

Best video in youtube about form validation of shadcn.

[@WebDevEducation]

🙏

[@shrikant124]

Finally I found best video on Shadcn forms, thank you so much ❤

[@WebDevEducation]

🙏

[@mohdali-yq8gq]

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.

[@AnsgarSteinkamp]

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

[@davebeauchemin1080]

Thank you so much for the explanation! Now it’s clear

[@WebDevEducation]

🙏

[@naylord5]

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

[@WebDevEducation]

You're welcome man and thank you 😊🙏

[@rikisyahputra3805]

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.

[@DiogoScarmagnani]

I think it happens to give a better experience to the user if the select is changed by mistake. This way, when the right option is also picked, the previous company value is still there. I agree that it could be removed after submitted but we must also validate it in backend at all, then...

[@rikisyahputra3805]

@@DiogoScarmagnani Yeah, I agree.

[@Adrian_Galilea]

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.

[@prapathsuayroop2341]

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]

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 🙏

[@oussamazerroug8171]

Amazing it's exactly what I was looking for ❤

[@jamesblake80]

Amazing video thanks! Made it really simple :)

[@kareememad2195]

great work , thank you so much ❤❤

[@ervczek]

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?

[@froggysan5203]

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

[@ibrahimcious]

What a great explanation! Subscribed!

[@WebDevEducation]

Thank you 😊 🙏

[@nonada2251]

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

[@buraxta_]

it's so clear and useful. thank you

[@tsykin]

Thank you so much for suc a clear explanation!

[@DiogoScarmagnani]

Very helpful video, thank you for it.

[@mayankkhetan702]

nice explaination sir !!

[@bobbyboxer2664]

Amazing video! Thank you so much 🙏🏼

[@AddictedGamerr]

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

[@ktrifon]

Excellent!!! Thank you very much!!!

[@benlahrechislam7611]

Great one sir, thank you!

[@chinmayghule8272]

There are quite a few videos on shadcn on KZbin 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]

Already covered that in my shadcn ui calendar video 😊🙏

[@cesarquispe2413]

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.

[@Lone-Tuna]

How to pass the values to server actions?

[@ayushjhabak2851]

how to set default value in shadcn select ?

[@ONEOTPOfficial]

it was really very helpfull man

[@debarshidas8678]

Thanks man! ♥

[@SanthoshRaghav-m1x]

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?

[@coolcubestudio]

Helpful! Thank you!

[@psmontte]

How do you validate data again in server function?

[@GabrielMPereira]

Great video! Thank you a lot

[@ItsMeBenny]

Great video !

[@ChamaraHarindra]

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.

[@kiranravi-k9p]

If the validation values come from an API .? At that time how can we write this Form Validation? At that time the client and server were confused and I can't do that... Give us a video for that one... I have to know

[@WebDevEducation]

In your response from API, likely within handleSubmit: form.setError("fieldNameHere", { message: "Message from api here", });

[@mohdali-yq8gq]

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]

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 🙏

[@codeyalaya]

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.

[@hollycow8171]

Can you do same without ShadeCDN. this is so cool

[@mezza3890]

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

[@captsha]

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

[@niklausmikaelson7332]

If you tyoe in the input check in console it will give error that uncontrolled change to control

[@WebDevEducation]

If you add defaultValues to empty string in the react hook form instance it will clear this error 🙏

[@techiesakar]

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

[@benjamincarriou8497]

Hi and thx How to reset the form after submission ?

[@ruanxun9454]

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.

[@AlexTLOU]

why is a simple form so complex 😢😢

[@WebDevEducation]

welcome to React 😂

[@AlexTLOU]

lmao, thanks for the video btw@@WebDevEducation

[@TANJAVEN]

excellent video

[@quokka8687]

Very helpfull!

[@Topsquadjapan]

Typescript just gets in the way

[@d4rzk252]

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]

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

[@WebDevEducation]

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

[@d4rzk252]

@@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 }) ?

[@OmarAfet]

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

[@WebDevEducation]

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.

[@Nickforu]

Thank You😊

[@Videoguy789]

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]

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]

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

[@codyoakes]

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

[@Isaac-d1m]

Check over the zod documentation

[@codyoakes]

@@Isaac-d1m 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]

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

[@gahaIor]

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]

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

[@Badis-n2u]

What about file input or rich text editor 🤔 How ?

[@WebDevEducation]

No different, same approach 🙏

[@aqarcity]

Thank you very much

[@RR-MQLTP]

Good job 👏

[@slavenDj]

Is it possible to use shadcn for file input?

[@WebDevEducation]

Yes should work :)

[@wahidlahlou]

Awesome!

[@AzamShaikh-gs1kc]

Appreciate it Sir Thanks

[@maykon-oliveira]

Just add a input type date, and everything breaks 😅

[@Isaac-d1m]

I think that's a zod issue

[@UtkarshWasHereBeforeYou]

You're the best

[@anhvuuc8693]

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

[@WebDevEducation]

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