Let's now figure out how forms are handled. We'll create a Contact, and let's find the Vue component. Probably contacts/create. There it is. So notice this heading here with a contacts/create that corresponds to this. Okay, so what I want to see is when I create the Contact, what exactly happens. This can be tricky, and how it's handled depends on the tooling you use. So for example, if these are server-side views, you're going to have one endpoint set up to show the form, and then another route endpoint set up to process the form. If you're instead using something like Laravel Livewire, then you'll have a single endpoint.

set up to show the form, and then another route endpoint set up to process the form. If you're instead using something like Laravel Livewire, then you'll have a single endpoint set up to show the form. And then the form itself is probably wrapped within a Livewire component, and that component will also process the form. So you don't need two routes set up if you're using Livewire. If you're building an SPA, you will have two routes, but you will use an AJAX request to submit the form. And I'm sure that's what Inertia is doing, but I think validation might be a little different. So let's have a look.

And I'm sure that's what Inertia is doing, but I think validation might be a little different. So let's have a look. If we come on back, first I can see all of the inputs are bound to this form object. form.firstName, form.lastName. Then we also see there's access to form.errors. Okay, so real quick, if you're curious about text inputs, select inputs, those are custom view components. This is a very common pattern. If you have a block that represents a form field, you can wrap that in its own view component, just to clean things up a little bit.

If you have a block that represents a form field, you can wrap that in its own view component, just to clean things up a little bit. But ultimately, we're dealing with a label and an input. Okay, but anyways, if we scroll on down here, let's figure out what's going on. So here's our data, and the form is an object, but it's wrapped in this Inertia form. So I just happen to know the Inertia form helper is based on the form helper that Taylor created a long time ago. And we covered that slightly at Laracasts a number of years ago. But basically, it's a wrapper to easily expose the sorts of things you would be looking for in a form.

But basically, it's a wrapper to easily expose the sorts of things you would be looking for in a form. So for example, is the form currently loading? Does it have errors? If so, give me the specific error for this property, things like that. So for example, if we come on back, let's open a few DevTools down to the Create. Where are you? There it is. Okay, so if we have a look at this, notice that yes, we have all of the fields here, firstName, lastName, organization.

Okay, so if we have a look at this, notice that yes, we have all of the fields here, firstName, lastName, organization. But you're also going to see other things, like an errors object is stored on the form. And that's, again, available through the Inertia form helper that is, again, based on some of the work Taylor did a number of years ago. Here is an accessor for whether the form currently has errors. What else? We have helpers here, whether we are submitting a POST request, or a PATCH request, or a DELETE request. Which means, if we wrap this up, you can then say this.form, and then the request verb that

request. Which means, if we wrap this up, you can then say this.form, and then the request verb that you need. In this case, you're creating a contact, so you would use a traditional POST request. Okay, what else? Nothing else. Processing is the form currently processing. And that would be, have you submitted the form, but you are awaiting the response. And usually, you would use that to, for example, disable the Submit button, so that you can only click it a single time.

And usually, you would use that to, for example, disable the Submit button, so that you can only click it a single time. In fact, let's just have a look. Let's see if he does that. Let's scroll on up. He has a custom component called LoadingButton. And sure enough, it has a property called loading, and that is bound to form.processing. So if we have a look at that, it's a simple button, and we disable it if the form is currently processing. And then it also looks like a little loading spinner displays.

So for now, let's give that a refresh. I just want to figure out how the basic form processing works, the happy path. So if we scroll on back, it sounds like when you create a form, and if you want to use the InertiaFormHelper, you'd create an object called form. You would then wrap it in a call to this InertiaForm. You give it all of the fields for your form. Then you can bind those right up here. So here's your input, and you're going to bind that to form.firstName. Next you're going to bind the errors to form.errors.firstName. And again, let's have a look at what that does.

Next you're going to bind the errors to form.errors.firstName. And again, let's have a look at what that does. So errors is a property this custom component accepts. And then if there's an error, it is displayed directly below the input, but only if there is an error. All right. Makes sense. So then once you're ready, you have this neat and clean form object that you can then pass to the request verb. And what's nice is it's kind of more of an object-oriented approach.

to the request verb. And what's nice is it's kind of more of an object-oriented approach. Because this form is an object with extra behavior, you can say this.form.post, and it will automatically include the properties or the fields you've provided here. So this is kind of cool. Notice this.form.post to the given round. So we learned, what was it? In the last episode, we learned that the route helper is using Ziggy behind the scenes, and now we know that we can use this inertia form helper to make this all a breeze. So let's see what happens when we hit that endpoint, contacts.store.

now we know that we can use this Inertia form helper to make this all a breeze. So let's see what happens when we hit that endpoint, contacts.store. Let's have a look. All right. That will hit contacts.controller.error.store. And scrolling down, here it is. This is how we create a new contact. Auth::User::get(accounts).

User. Get their accounts. I guess the relationship is a User has an Account, and an Account can have many Contacts. Let's see. Auth. User. Account. Yes, a User belongs to an Account, and an Account has many, or consists of many Contacts. So we're just going through those, excuse me, those relationships. Create a new Contact.

So we're just going through those, excuse me, those relationships. Create a new contact. We validate the request. We're going to figure out what happens with failed validation in the next episode. But the validate method, if it passes, will return all of the validated attributes. And then this validate method, if it passes, the response of this is going to be the validated attributes. So you can pass that directly to Eloquent's create method. And that's it. So finally, the only remaining step is we redirect back to the contacts page with a

And that's it. So finally, the only remaining step is we redirect back to the contacts page with a flash message. And flash messaging is also something we need to review. And we'll do that two episodes from now. So we can see that if we're using Inertia, we still have access to simple Laravel redirects. And it seems like everything should just work. We'll create it. But real quick, before we do, if we come on back, at this point, this form object is populated with our fields because we use v-model.

But real quick, before we do, if we come on back, at this point, this form object is populated with our fields because we use v-model. We then pass those fields to this.form.post. That goes to ContactsController and the store method. We validate those attributes. And if it passes, we create the Contact and then redirect back to the contacts page with a flash message. So we run it. And there we go. Contact created.

And there we go. Contact created. So further, we have now learned that you can grab the errors for an input. You can check if the form is processing. And you can, last but not only, submit requests directly off of that form object. All right. In the next episode, let's figure out validation.