00:09
They're all the same, and we're also going to have this continuously throughout our application. So let's take some time in this lesson to extract this out into a reasonable component so that we don't have to copy and paste it everywhere.
00:18
So go ahead and pick one of the three inputs that we have here, give it a copy, and then let's jump into our Inertia components directory, right-click on that, click New File, and since
00:27
we already have a component called input via shodcm-view inside of our application, let's go ahead and call this something different. So we'll just prefix it with form. So form input.view.
00:36
That way, we have a solid separation between which one's the shodcm and which one is our component. Let's start by adding in our template so that we can paste in our divs with our input inside
00:46
of it, and then we can add in our script with the setup flag and specify the lang as ts, and let's set up our props.
00:53
So we'll do const props equals define props, and then inside of our props, let's add in a label of type string. We'll need a type for our input.
01:03
This will be optional because we'll want to specify a default if one is not provided, and this will be a type string.
01:08
Now to provide that default, we can wrap our define props in a with defaults method.
01:14
The define props goes in as the first argument there, and then the second argument is an object containing our default prop values.
01:22
So we can pass in type there with our value defaulting the type to string if a type is not specified via our props.
01:29
So if we pass in a type, whatever type we pass in will get used, otherwise it will just default to a type of string, and with defaults there has red squiggly, it's because the D should be capitalized there.
01:39
All right. Now to finish out our props, in addition to a type, we also want a model value. This is the actual value we'll make use of for our view model, and we'll make that a
01:47
type of string, and we'll also allow it to be a number as well. Then we may or may not have a placeholder, so we'll make that optional and specify its type as a string. Same thing with our error.
01:57
We may or may not have an error, so we'll make that optional, and we're normalizing that to a type of string inside of our inertia config. So if we jump back into there, we're reducing over our errors object and joining in its
02:07
array values as a comma delimited string. So because of that, we can call this a singular error and have its type as a string rather than a string array.
02:15
Then let's also add in a disabled flag that's optional and type boolean and a required flag that's also optional and type.
02:22
We've opted to specify individual props here as opposed to directly passing in our form because that helps make our form input here a little bit more reusable as we don't specifically
02:32
have to be working with the use form helper in order to use this component, and it's also going to make our types a little bit easier to work with as well.
02:38
Okay, so we can replace our email string here as this will be our label coming from our props. Same thing here with our type.
02:45
We can add in our type there and then prefix the attribute there with a colon so that the actual variable is used. Let's skip over our view model right now because we can't directly reference our model value
02:55
as you cannot or should not alter props in view. So we'll need to add in a computed property to circumvent that.
03:01
And then our form errors is instead going to just be error in both of our usages. So in our VIF and in the actual value. Okay, so back to our view model.
03:10
Since we don't want to directly mutate the prop value, we're instead going to want to emit it out as an event to update our model value. So let's start by importing computed from view.
03:19
So import computed from view. Jump down to the bottom of our props there and do const, and we can specify this as our
03:26
internal value internal to this component and then use computed pass in an object where
03:31
we will have a getter that returns back our props model value and then a setter that accepts in a value. And then we want to emit that new value out to the parent component.
03:41
Whenever we do emit that out, the parent component will then update its prop value being passed into this component. And then that will get updated inside of our computed property, just kind of making a
03:50
nice little value update circle there so that both our parent and this internal component are aware of the change.
03:56
So let's go ahead and do const emit equals define emits pass in an array here with our model value update events or update colon model value.
04:06
And then we can jump down to our setter and emit update model value and emit out the actual updated value.
04:12
So now instead of review model, we can replace our form dot email with our internal value.
04:18
So as we type inside of our input, that will alter calling the setter of our internal value. That new typed in value will get passed out and emitted up to our parent component where its form value will be updated.
04:28
That new value will come through as our model value prop where it will then be directly read from our computed value here, making that nice little circle that we mentioned earlier.
04:37
OK, next, let's bring up our flags. So we have disabled. We can just directly pass in disabled there. And then we also have required, which we can, again, just pass in required there as well.
04:47
Awesome. Let's give that a save. Jump back into our register page and let's try to make use of it. So let's replace one of our inputs here with our new form input.
04:55
Go ahead and in that out as we don't need to pass in any child content. Provide in our label. I'll be replacing full name. So I'll type in full name here.
05:03
The view model will be our form full name. Then we'll want to pass in the error as form errors, full name.
05:11
And then we can also specify to be disabled when our form is processing. So when we submit our form, the input will become disabled as we update our internal input.
05:20
That circle that we mentioned will in turn also update our form full name value. And then if we have any errors, we're passing that in directly from our form. All right. So let's go and get rid of our previous full name input there.
05:30
Let's jump back into our browser. I'm going to give another refresh there just to make sure that we got everything up to date. And it looks at you. Okay. Let's go ahead and type out something there. Something, whatever that is there.
05:40
And then something there. And I think that's something that we left from the previous lesson. I'll double check that here momentarily, but first let's go and take a look at our post data here. Scroll down to our request.
05:49
And sure enough, there is our full name. And then I believe we added something to add an example to the end of that in the last lesson. So our input, its value is still working.
05:58
Let's go ahead and clean up our inputs here so that we don't have this extra stuff going on from our previous lessons. So we'll scroll up. This is most likely happening on our success. Sure enough.
06:08
There we go. We want to reset all of our fields. So let's get rid of the argument there. And then we don't want that extra error. So we can just get rid of that. We also don't need to transform our data so we can get rid of that and we can collapse
06:18
this back down. We will be going somewhere else whenever we submit this form. So we also don't need to worry about the preserve scroll and we can make direct use
06:25
of the return value here with our error function to just simplify that, get that back down to a single line. Give it a copy. Get rid of this on submit altogether.
06:35
Scroll back down to our form and paste that in. Okay. So now we should have all of that extra stuff out of the way here. Scroll through. Everything looks good there. Okay. Let's give that a save now.
06:45
We also have this extra space right here we can get rid of. We no longer need it. Jump back into our browser and we should be back to a pretty normal looking form here. Awesome.
06:52
Go ahead and type in some name, some email, and then some password here. Register and everything should work a-okay. We're still getting redirected back here, but we no longer have any errors.
07:01
We're getting redirected back here again because that's exactly what our route handler is doing. Our values are still going up a-okay. So everything looks perfectly fine here.
