WEBVTT 00:00.000 --> 00:00.270 Okay. 00:00.300 --> 00:03.450 It's now time to tackle forms, really. 00:03.450 --> 00:09.150 And we've looked briefly at forms in the past in this course with our login and register forms. 00:09.150 --> 00:11.190 But then we're very simple to input forms. 00:11.190 --> 00:15.600 And inside the form that we're going to create for our create product, it's going to be a bit more 00:15.600 --> 00:16.110 complex. 00:16.110 --> 00:18.030 We'll have more than just text inputs. 00:18.030 --> 00:22.590 We've got image upload of course, but we've also got things like dropdown selectors. 00:22.590 --> 00:24.810 We need to be able to select a type in a brand. 00:24.810 --> 00:28.650 And we also need to think about validating these things as well. 00:28.650 --> 00:31.560 So slightly more complex than we've looked at so far. 00:31.590 --> 00:41.100 And inside our admin folder let's go and add a new file inside here and we'll call it Product form TSX. 00:41.100 --> 00:45.420 We'll use the same form for both creation and editing. 00:45.420 --> 00:48.900 So we'll use the snippet to create this. 00:48.900 --> 00:52.140 And we're going to be making use of react hook form again. 00:52.140 --> 00:55.170 And we're also going to be using Zod for the validation. 00:55.170 --> 00:59.970 So we'll set up the schema as our first step inside here really. 00:59.970 --> 01:07.910 And inside the schemas folder let's right click and say new File and we'll call it Create Product schema 01:07.910 --> 01:09.350 dot ts. 01:09.440 --> 01:18.230 And inside here that's export const and we'll call it create product schema. 01:18.920 --> 01:26.870 And we'll set it equal to z that we get from z dot objects and open parentheses and curly brackets. 01:26.870 --> 01:29.510 And then we'll just add our different properties. 01:29.510 --> 01:33.350 So we're going to have a name which is going to be a type of z string. 01:33.860 --> 01:38.870 And in parentheses and curly brackets we'll specify required error. 01:38.870 --> 01:43.370 And this will give us the ability to just give it a custom message. 01:43.400 --> 01:50.690 And we'll specify name of product is required for the first one. 01:50.810 --> 01:55.310 For the description of the product we'll say z dot string. 01:56.390 --> 02:05.210 And again we'll use the required error and say description is required. 02:06.770 --> 02:18.040 And then we'll chain on a min property and say minimum of ten and open curly brackets after this, and 02:18.040 --> 02:26.200 then we can give it a message for a specific type of validation error and say description must be at 02:26.230 --> 02:29.380 least ten characters. 02:30.730 --> 02:33.820 And below the description we'll have the price. 02:35.440 --> 02:38.530 And for this one we'll do something slightly different as well. 02:38.530 --> 02:47.770 So with mods or with our form inputs then anything that we put into an input is a string effectively. 02:48.580 --> 02:55.810 But we want to validate this based on a number and give it a minimum amount of that number. 02:55.990 --> 03:04.120 So we can use z scores, which is going to coerce what we receive from the HTML input. 03:04.210 --> 03:06.520 And then we can specify number. 03:06.520 --> 03:12.370 So from this point on we can treat it like a number, even though as the user is typing in even into 03:12.370 --> 03:17.260 a number input, that still comes into us as a string. 03:17.260 --> 03:19.270 But this will force it to be a number. 03:19.440 --> 03:25.170 And then we can specify a required error and say price is required. 03:25.620 --> 03:27.510 And we can give this a min. 03:27.690 --> 03:30.390 And this will be based on a numeric value. 03:30.420 --> 03:31.980 So that will be 100. 03:31.980 --> 03:36.780 And then inside here we can shorthand the error message. 03:36.780 --> 03:39.540 We don't need to put it inside an object as we did up here. 03:39.540 --> 03:44.910 We can just say price must be at least. 03:45.090 --> 03:51.060 And then I'll specify dollar of 1.00. 03:51.630 --> 03:53.640 And let's bring that down. 03:53.670 --> 03:55.500 I don't like going off the edge of the screen. 03:55.530 --> 03:56.280 Okay. 03:56.430 --> 03:59.310 So below the price we'll have a type. 03:59.460 --> 04:02.370 And this is just going to be Z string. 04:02.820 --> 04:08.190 And we'll use the required error again and just say type is required. 04:08.610 --> 04:10.080 And I'll add a comma. 04:10.110 --> 04:11.850 I'll just copy this one down. 04:11.850 --> 04:15.570 And this is going to be for the brand which is going to be exactly the same. 04:16.050 --> 04:19.860 And I'll just swap the message for brand is required. 04:20.970 --> 04:24.750 And then we've got the quantity in stock. 04:25.790 --> 04:32.360 And once again, we'll use the coerce to coerce this into a number, and we'll give it the required 04:32.360 --> 04:40.610 error and say quantity is required, and we'll chain on the min and specify one. 04:42.800 --> 04:50.060 And just specify quantity must be at least one for the error message. 04:50.060 --> 04:53.690 And then we need to deal with our file. 04:53.720 --> 04:57.920 So how do we deal with the file property inside here. 04:58.220 --> 05:08.810 Well I'm going to come up above this and create a helper function for this and say const file schema 05:10.490 --> 05:13.970 equals and we use z dot instanceof. 05:13.970 --> 05:16.820 And then we can specify it's a type of file. 05:17.960 --> 05:22.580 And then we can use the refine method to refine how we're going to validate this. 05:22.580 --> 05:25.340 And we're going to pass in the file as a property. 05:25.340 --> 05:30.500 And we're going to check the file size and make sure it's greater than zero. 05:31.010 --> 05:36.430 And then after this we'll add a comma and curly brackets, and we'll just specify a message. 05:36.790 --> 05:42.910 And in quotes we'll say a file must be uploaded. 05:44.860 --> 05:51.160 And I've put it up here because we will need to add a few extras into this as we build our form. 05:51.250 --> 05:53.830 But I've just got it up here out the way at the moment. 05:53.830 --> 05:56.830 And then I can just specify the file schema. 05:56.860 --> 05:57.760 Okay. 05:58.750 --> 06:02.770 And then we'll export our type as well from this. 06:02.770 --> 06:11.860 So I'll specify export type and we'll call it create product schema equals z dot infer. 06:12.250 --> 06:18.940 And then in angle brackets we'll use type of and create product schema. 06:19.000 --> 06:23.320 Same as we've done before so that we can use that inside our form. 06:23.320 --> 06:25.120 So that's our schema created. 06:25.120 --> 06:28.420 And then of course we can go and use that in our product form. 06:28.420 --> 06:30.160 So we don't have anything in here just yet. 06:30.160 --> 06:33.400 But we'll bring in what we need for react hook form. 06:33.400 --> 06:38.530 So we've used this before I'll just say const open curly brackets and then use form. 06:38.710 --> 06:45.130 and then we can utilize our create product schema we have just created. 06:45.160 --> 06:49.870 Our open parentheses and inside curly brackets we can give our form the options. 06:49.900 --> 06:53.290 I'll specify mode as untouched. 06:53.620 --> 06:55.960 And then we'll have our resolver. 06:55.960 --> 06:57.940 And we'll set this to. 06:57.970 --> 07:02.860 The resolver which we get from hook form resolvers. 07:02.860 --> 07:06.400 And I'll pass in the create product schema. 07:07.120 --> 07:13.240 And what we used before from use form was the register to register our different inputs. 07:13.240 --> 07:13.660 But we're going. 07:13.690 --> 07:18.760 To take a slightly different approach for this because I want to create things that are more reusable. 07:19.930 --> 07:25.630 Than what we did before, which will result in slightly less boilerplate code inside our form. 07:25.660 --> 07:32.560 And what we'll take a look at next is creating effectively reusable text input fields. 07:32.560 --> 07:32.890 But we're. 07:32.920 --> 07:37.900 Going to use a different approach to using react hook form and utilize controlled inputs. 07:37.930 --> 07:43.660 Rather than uncontrolled inputs which is what the Register uses to do that. 07:43.660 --> 07:44.590 And we'll take a look. 07:44.620 --> 07:45.730 At that next.