Learn Livewire
This episode is for members only

Sign up to access "Learn Livewire" right now.

Get started
Already a member? Sign in to continue
Playing
07. Using form classes

Episodes

0%
Your progress
  • Total: 2h 52m
  • Played: 0m
  • Remaining: 2h 52m
Join or sign in to track your progress

Transcript

00:00
OK, so we're going to do a few things in this episode. First of all, we're going to create our form style up
00:05
so it actually looks a little bit nicer. Then we're going to submit the data through that we need to actually create a book. We're not validating at the moment.
00:14
We'll talk about validation a little bit later. And then we'll examine this book index and decide whether we can improve this with a form class within Livewire, which we can.
00:25
So let's go and just start to style up what we see at the top here just so it looks a little bit nicer. So we're going to come over to our book index here.
00:34
I'm going to go ahead and just separate out each of these components here just so this sits a little bit further up the page. And let's just start to style this up a little bit better.
00:44
So I'm going to create a div just to house the title in here. And we'll add a label, which is really important. That's going to be for the title. And in here, we'll just say book title.
00:54
Now, we're going to get rid of that and add in a placeholder and say book title. And we'll set this with a class of screen reader only. And if we head over, there we go.
01:06
So that's our input for our book title. Let's add a couple of styles to this input. So I'm going to set a width of full. I'm going to add a border to this.
01:16
And let's set the border to slate 300. And we'll make this rounded as well. So looking a little bit nicer here. Now, we're going to have multiple of these.
01:25
So let's go and duplicate this down. We know that we need a book author as well. So let's say book author. And we're going to wire this up to an author, which
01:35
we don't have just yet. And we'll just change everything over. So basically, just duplicating this out. OK, so for the form itself, let's just style this up
01:42
so it looks a little bit nicer. We're going to set flex with items center. And we'll space these out on the x-axis by three. And we have something that looks like that.
01:53
So a little bit better. We can style up our Submit button as well. All of the code for these styles are in the GitHub repository. So you can go over and copy these if you want to.
02:02
So let's set a background of blue 500 on this. We'll make the text white. We'll set some padding on the y-axis, padding on the x-axis. We'll set this to rounded large as well.
02:13
And we'll just medium the font so that looks like that. Great. Now, we want to go ahead and stretch these out. So let's go and set a flex grow on each of these.
02:26
And there we go. Great. So a better looking form. Not super important, but at least we
02:31
can see what we're doing a bit better now. OK, so let's go ahead and create that author property out in here so we can hook both of these things up. And we'll make sure we've got both of these things
02:44
by just dying and dumping on each of these when we submit this form. So now we should be able to enter a book title and an author.
02:54
OK, so we've got both of these pieces of data. Let's now use these to create out a book. So let's go over here. We know that books are created via the user
03:04
because we want these attached to the user. So we'll do this via that relationship. And then we'll go ahead and create this. Now, we need to pass in the title and the author
03:14
into the create method to actually create this out. So let's go ahead and do this like so, title, this title, and author, this author. Obviously, this isn't validated yet.
03:29
We'll get to that a little bit later. So let's go ahead and try this out. And remember, this is at the point where when we call this method, Livewire
03:36
will re-render our list of books. So what we should see by the time we finish is the new book just roll in. So again, that's the magic of Livewire
03:45
here that it just will automatically update everything for us. So the book title, I'm just going to say a book. And let's choose a different name here.
03:53
Hit Submit. And something has gone wrong. OK, so this is really interesting. We're going to ignore everything I've said about wire key
04:00
because at the moment, I have done this wrong. So if we come up to our book index here, I'm not actually outputting this value. We need to do that.
04:10
So we need to actually output this value into here rather than the kind of binding syntax that we saw here. So hopefully that should work. But like I said a couple of episodes ago,
04:21
that is an example of what happens when you don't use wire key, or in our case, when you implement wire key wrong. So I implemented wire key wrong.
04:29
Probably a good thing that I did that because you've now seen what kind of stuff happens when we don't add a key to our list. It just went a bit mad. So let's try another one.
04:39
So I'm going to say another book in here. And again, we'll just choose Mabel as the author. Hit Submit. Now that we've got that wire key,
04:46
LiveWire knows how to update this properly. And you can see, sure enough, it is working. Now, ignore this one. Obviously, this should be a little bit below this one.
04:56
That's just because I manually created that in the database, and the timestamps aren't quite matching up. But you can see here now, this is actually working. So I'm going to hop over and just get rid of this one
05:06
because I don't want that to get in the way and cause any confusion. So we should have another book as the latest. OK, so now we're going to talk about resetting state.
05:15
Now, what we're doing here, if we head over to our book index, is not really necessary. All of this stuff could be moved over to a form class, which we are going to cover.
05:25
But let's just take a look at resetting state in the traditional way. So once we've created the book in the database, all we really need to do is set these back to the defaults
05:33
that we would normally see. So let's look at a really simple way to do this, first of all, which is just to access these properties and change their value.
05:41
So I can go ahead and say this title and set that to an empty string. And we can do the same for the author. Now, when we do this, because we're
05:53
updating these values in our component, that will be reflected within our form as well because, remember, when we use wire model, these are bound to them values.
06:03
So let's say a book by Alex. When I hit Submit now, as well as that being created, it's also going to change the value of the title and the author.
06:13
And it's going to get rid of them. Now, it's not happening at the moment. There's a really good reason for this. And this is more of a sort of a starter kit issue here.
06:24
Now, when we installed Livewire, I said that it came with Alpine JS. Now, the reason that we're not getting this functionality working is because we actually now are
06:33
running two versions of Alpine. We have a sort of conflict. I'm going to head over to app.js. And we should have really done this earlier.
06:40
But obviously, now is a really good time to demonstrate why things aren't working. So when we installed our Laravel starter kit, Alpine was included.
06:48
We chose the Blade and Alpine option. But Livewire, when we installed it, comes with its own version of Alpine. Because we're running two versions of Alpine
06:58
next to each other, we have some sort of issue here. So I'm going to go ahead and get rid of this from app.js. Like I said, we should have done that earlier. But at least now we've demonstrated
07:07
what's actually happening. So I'm going to go ahead and just give that a refresh. And we'll just create another book in here by Fred. Hit Submit.
07:17
And there we go. Perfect. So an Alpine conflict there causing chaos. Like we saw with the wire key, that was an issue as well.
07:24
So all of these things we need to really think about. But hopefully, that's given you a good idea as to what you need to do. So there we go.
07:30
That's working really nicely. We can go ahead and type a book title, type a book author, hit Submit, get that data re-rendered out so we can actually see this instantly
07:39
without any page refresh. And that is looking really nice. But we want to move this over to a form class. So let's go ahead and do that now very quickly
07:49
and just see how this tidies up what we've got here. So within Livewire, we can create form classes, which is a way to encapsulate all of the form stuff into a single class, including validation,
08:02
the properties that you store. And you can also use your form class to create your model as well. Now, at the moment, the reason we
08:10
want to move this over to a form class is because these public properties here that are to do with our form don't really feel right inside of a book index.
08:18
It feels a little bit weird. So let's go ahead and create our really basic version of this form class. And we'll adjust this as we go.
08:25
So we're going to go ahead and say Livewire form. And then we're going to give the name of the form. So I'm going to call this BookForm. And really interestingly, later on,
08:34
we can also make use of this form to update our book as well. So we can do two things with this form. Let's just take a look at this first of all
08:43
and see what it looks like. That is now in app Livewire and forms. So it looks like this. It's an empty class with an extension of form.
08:52
So it just extends this base form class, which has a load of functionality inside of it, which we can use. And you can take a look at that if you want to.
09:01
Let's just switch this over. We'll just really basically switch over everything that we've already done from our book index into that new form class.
09:08
So I'm going to go ahead and get rid of the title and the author from here. And I'm going to put that into the book form, because that belongs in the book form.
09:16
I'm going to get rid of the create book method out of here as well, because that doesn't really belong inside of our book index. And I'm going to put that inside of here.
09:28
And I'm going to rename that to create, because we already know that it's part of a book form now, and it's going to create an actual book. And to be honest, that's pretty much it.
09:36
We've just moved everything over into its own class. Now, obviously, if we come over here and just try and do anything, it's not going to work. So we can't call this create book method.
09:45
It doesn't exist anymore. Of course, that makes sense. So how do we use this book form within this book index? Well, it's very easy.
09:54
All we need to do is create out a public property, type in the book form, and just give it a name. So in this case, I'm going to call this form. Then we can use form anywhere in our blade template
10:05
or inside of this book index component to reference anything that is now encapsulated away inside of this book form. So let's go over and give this a refresh.
10:14
It's still not going to work, because we need to change over the references. So let's do that now. OK, so let's take a look at where we're actually
10:21
using this. We're using this over in book index, because we are hooking up our title and now author. So let's now say form.
10:29
That's referencing the public property just over here inside of our book index. Let's open that up here. That's referencing that.
10:37
And we'll do the same here as well, form.author. Now, with our create book method, this is slightly different. We're not going to move this over and reference
10:46
form.createbook. Instead, what we're going to do, which is a convention I like to use, is just have an overall submit method.
10:54
So this is inside of a book index, so it feels a little bit weird at the moment. But when we submit this form, we are going to call a method over in here called submit.
11:05
So eventually, we're going to move the entire form out to its own component. But for now, we can just call this method. What we do in here now is we say this form create like so,
11:18
because we've added that create method over into our book form, and we invoke it from here. Now, let's go and just try this out and see what happens. So I'm going to go ahead and say abcdef, hit Submit,
11:31
and there we go. It's worked as we would expect, so really, really nice. Now, we are going to just make a very slight change to this just to tidy things up, and that is over in our book form.
11:43
Now, at the moment, we've got a create method, which is setting the title and the author back to an empty string. And the create method doesn't really
11:50
feel like it should be responsible for that. So I'm going to go ahead and cut that out of here. Now, what we can do is we can very easily, from our main submit method, once we've created this,
12:00
we can reset the state of our form. So we could say something like this form, and then reset. So what this will do is it will take all of the properties that you have inside of that form,
12:12
and it will reset them back to their initial state, so the initial state that you created the properties at. Let's try this one more time, so abcdef, hit Submit, and there we go, that's been created,
12:23
and these have been reset back to their original state. Now, it's really up to you where you put this. If you wanted to, you could take this and do this directly within your book form
12:33
after you create this if you want to. I'm actually going to leave it in there because I think this kind of makes sense. And again, because we're working within this class now,
12:40
we can just get rid of the form reference and reset. And what we can also do with this is reset specific things if we want to as well. So we could just reset the title if we wanted to,
12:51
we could just reset the author, it really depends on what you need to do. But reset is probably the one you're going to use the most. There are others, so you can check out the documentation
13:00
if you need to do anything specific. Okay, so this has taken quite a while, let's recap. We had our form inside of our book index, which felt a little bit weird
13:09
because we had public properties floating around. We've moved this over to a book form, we're referencing that within here and within our templates, and our book form is responsible for holding the data
13:22
that we need to actually create this for the form. And it's also responsible for creating this and then resetting the state using this handy method. Okay, I think we're pretty much done with forms.
13:33
Now, what we're going to do is look at validation, really important part, of course, of any application. And we're going to do this all within our book form in the next episode.

Episode summary

In this episode, we take our collection of book-adding forms and give them a serious upgrade. First, we spend some time making the form look a bit better—adding some styling, better structure, and tidying up the layout so everything is easier on the eyes. Then we hook up the ability to actually submit our form data—adding support for capturing the book title and author, and using that data to create a new book record for the user. If something goes wrong, we debug it together.

A big moment here: We notice that handling all this form logic directly inside our main Livewire component (like BookIndex) feels a little messy. So, we move all that form-related state and functionality into a dedicated Livewire form class. This keeps things way more organized—our form logic (like maintaining title/author state and the logic for creating new books) now lives in its own place, and our main component gets a lot tidier.

We also learn how to reset our form state after submission (so the fields clear out), and tackle a few real-world issues, like an Alpine.js conflict and how to solve it. Throughout the episode, we talk through the reasons for each change, demo how things work as we go, and highlight plenty of practical tips for keeping your codebase clean.

By the end, everything is working nicely: our form looks good, behaves well, and is easy to maintain. Next up, we're diving into adding validation rules to our new form class, so stay tuned!

Episode discussion

No comments, yet. Be the first!