Okay.
It's now time to tackle forms, really.
And we've looked briefly at forms in the past in this course with our login and register forms.
But then we're very simple to input forms.
And inside the form that we're going to create for our create product, it's going to be a bit more
complex.
We'll have more than just text inputs.
We've got image upload of course, but we've also got things like dropdown selectors.
We need to be able to select a type in a brand.
And we also need to think about validating these things as well.
So slightly more complex than we've looked at so far.
And inside our admin folder let's go and add a new file inside here and we'll call it Product form TSX.
We'll use the same form for both creation and editing.
So we'll use the snippet to create this.
And we're going to be making use of react hook form again.
And we're also going to be using Zod for the validation.
So we'll set up the schema as our first step inside here really.
And inside the schemas folder let's right click and say new File and we'll call it Create Product schema
dot ts.
And inside here that's export const and we'll call it create product schema.
And we'll set it equal to z that we get from z dot objects and open parentheses and curly brackets.
And then we'll just add our different properties.
So we're going to have a name which is going to be a type of z string.
And in parentheses and curly brackets we'll specify required error.
And this will give us the ability to just give it a custom message.
And we'll specify name of product is required for the first one.
For the description of the product we'll say z dot string.
And again we'll use the required error and say description is required.
And then we'll chain on a min property and say minimum of ten and open curly brackets after this, and
then we can give it a message for a specific type of validation error and say description must be at
least ten characters.
And below the description we'll have the price.
And for this one we'll do something slightly different as well.
So with mods or with our form inputs then anything that we put into an input is a string effectively.
But we want to validate this based on a number and give it a minimum amount of that number.
So we can use z scores, which is going to coerce what we receive from the HTML input.
And then we can specify number.
So from this point on we can treat it like a number, even though as the user is typing in even into
a number input, that still comes into us as a string.
But this will force it to be a number.
And then we can specify a required error and say price is required.
And we can give this a min.
And this will be based on a numeric value.
So that will be 100.
And then inside here we can shorthand the error message.
We don't need to put it inside an object as we did up here.
We can just say price must be at least.
And then I'll specify dollar of 1.00.
And let's bring that down.
I don't like going off the edge of the screen.
Okay.
So below the price we'll have a type.
And this is just going to be Z string.
And we'll use the required error again and just say type is required.
And I'll add a comma.
I'll just copy this one down.
And this is going to be for the brand which is going to be exactly the same.
And I'll just swap the message for brand is required.
And then we've got the quantity in stock.
And once again, we'll use the coerce to coerce this into a number, and we'll give it the required
error and say quantity is required, and we'll chain on the min and specify one.
And just specify quantity must be at least one for the error message.
And then we need to deal with our file.
So how do we deal with the file property inside here.
Well I'm going to come up above this and create a helper function for this and say const file schema
equals and we use z dot instanceof.
And then we can specify it's a type of file.
And then we can use the refine method to refine how we're going to validate this.
And we're going to pass in the file as a property.
And we're going to check the file size and make sure it's greater than zero.
And then after this we'll add a comma and curly brackets, and we'll just specify a message.
And in quotes we'll say a file must be uploaded.
And I've put it up here because we will need to add a few extras into this as we build our form.
But I've just got it up here out the way at the moment.
And then I can just specify the file schema.
Okay.
And then we'll export our type as well from this.
So I'll specify export type and we'll call it create product schema equals z dot infer.
And then in angle brackets we'll use type of and create product schema.
Same as we've done before so that we can use that inside our form.
So that's our schema created.
And then of course we can go and use that in our product form.
So we don't have anything in here just yet.
But we'll bring in what we need for react hook form.
So we've used this before I'll just say const open curly brackets and then use form.
and then we can utilize our create product schema we have just created.
Our open parentheses and inside curly brackets we can give our form the options.
I'll specify mode as untouched.
And then we'll have our resolver.
And we'll set this to.
The resolver which we get from hook form resolvers.
And I'll pass in the create product schema.
And what we used before from use form was the register to register our different inputs.
But we're going.
To take a slightly different approach for this because I want to create things that are more reusable.
Than what we did before, which will result in slightly less boilerplate code inside our form.
And what we'll take a look at next is creating effectively reusable text input fields.
But we're.
Going to use a different approach to using react hook form and utilize controlled inputs.
Rather than uncontrolled inputs which is what the Register uses to do that.
And we'll take a look.
At that next.