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
06. Diving straight into forms

Episodes

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

Transcript

00:00
Forms make up a massive part of pretty much any application,
00:03
and this is where Livewire really shines. We can do some really cool things with forms in Livewire. Now, in this episode, we're just going to take a look at the very basics,
00:12
getting data bound to an input so we can do something with it. In that case, it's going to be something like our book title, which we can eventually use to create a record in the database and, of course, have this list update.
00:25
So let's head over. We're going to do everything, first of all, inside of our book index. Later on, we're going to move this functionality
00:32
to separate the concern, and we're going to learn about events and dispatching events. But for now, we'll just put this directly within our book index template.
00:42
So obviously, we're going to need a form. Now, I'm going to create the form above this data here, but of course, we need an overall wrapper. We've already learned that.
00:50
Otherwise, this isn't going to work. So I'm going to go ahead and create out a new component in here. OK, so let's go and just steal some of the code
01:00
from our book item because we want this form to be within this container. So let's create this here and end these two things up here. And then inside of here, it's going to go out form.
01:11
So we can just create out a normal form like we normally would, a normal HTML form. Livewire has the ability to detect when a form has been submitted.
01:20
So as well as the click event on buttons that we've already discussed, we can attach these directly to forms as well. We don't need an action here.
01:27
We don't need to submit this through to anywhere because everything is going to be happening within our Livewire component. So I'm going to create out a really simple input
01:35
with a type of text. I'm not going to style this up or anything like this. I'm going to get rid of the name because we're not going to need that.
01:41
But I am going to fill in the ID because we'd need that for something like a label. OK, if we head over here, sure enough, we have got a form input.
01:49
It doesn't look great at the moment, but we want to bind this to some data within this Livewire component. So it keeps track of it.
01:58
Let's go ahead and try this out. So I'm going to go ahead and open up my book index just in here. And when we are creating forms, we
02:06
bind data from the form to public properties. We are going to switch this up later with a specific form class, but let's take a look at the basics. So I'm going to go ahead and create out a public title
02:18
in here. And we can type in that to string as well if we need to. Now, I want to hook up the data that I enter into the form into this title.
02:26
So later, when I call a method like create book from my form or when this form submits, in here, we can create the book. And obviously, because we've got a public property, we can access that data.
02:40
So we're not going to do that just yet, but let's hook this up. So over here, we've got our input. What do we do?
02:46
Well, we use wire model. If you've come from a framework like Vue.js or if you've ever used a framework like this, you know that the concept of a model
02:54
is the two-way binding between this data and the data in your component. So in our case, we're just going to say wire model title. That input is now hooked up to that public property that
03:06
exists within this component. Now, let's just have a play around with this. Just before the form, I'm going to go ahead and output the title.
03:14
So we've got our title here, like we saw with our counter example earlier. We've hooked this up to our input, and we're outputting the title on the page.
03:23
So surely, when we go ahead and type something in here, it should show that value. Now, that's not actually what is happening here. With LiveWire version 2, that would have shown that value.
03:35
But what we are doing is every time we're typing, when we are refreshing this component, remember we're making a network request. So if, for example, this value was always
03:46
to be kept up to date and made a request every time we typed something, it wouldn't be a good idea. We'd be making too many network requests. Let's just demo this out, because this
03:55
is a super important concept for working at speed within LiveWire. So when I type in here, you can see nothing's happening. We don't have any network requests at all.
04:03
That is the default behavior in LiveWire 3. If you ever come across LiveWire 2, you will find that you will automatically have live updates.
04:14
So these things here with a dot are called modifiers. So we've modified this to make this live. Now, there are some circumstances where you will want this to happen.
04:24
For example, later on when we implement our search, we are going to want this to take into account when we're typing so we can get back our results. But for something like this, we don't
04:33
need this data to be constantly updated within that component itself. So let's take a look at the difference. I'm going to type ABC.
04:40
And you can see that we've made three network requests. Now, that's a little bit of a waste, because we don't really need to see this value on the page. All we need is to send this down once to our component
04:52
when we click on the Submit button. So let's take a look at the difference. I'm going to get rid of Live. That is useful.
04:57
And we'll be looking at that later. But let's go and just attach an event handler to this form. So we're going to say wire submit. Now, again, we're going to add a modifier to this,
05:07
because we want to prevent the default behavior of this form. So this is like doing event dot prevent default in JavaScript. So we're going to go ahead and prevent the default behavior of this form.
05:19
When it is submitted, we're going to call a method in here. Let's say that's Create Book. Now, we're going to need a Submit button. So let's create a Submit button out in here.
05:28
And let's go ahead and implement this Create Book method over in here. So that's Create, Create Book. And for now, at least, we just won't do anything inside
05:36
of there. So let's go over and try this out. So I'm going to go and enter something in here. Of course, we've got rid of that Live modifier.
05:44
So this data isn't being sent down to our component. Nothing is being updated. But when we call a method, that gets updated. So now, once we've submitted this,
05:54
we've got all the data we need, hopefully, within this form. And if you can see, let's just take a look at the preview in here. And you can see that in our updates here,
06:06
we've got the title of ABC. So the updates are being sent down once and not every time we type, which is useful. OK, so now that we've done this, let's sort of pull this
06:16
together and just see that we can access this value within here. So we're not actually going to create the book yet. But let's just die dump on this title.
06:25
So eventually, we'll get to the point where we actually store the book in the database here. Let's go ahead and type in a title, hit Submit. And sure enough, you can see that gets die dumped out.
06:36
And this is a really useful feature of Livewire where we see this modal window with anything we're dumping out. So if we are debugging in this way,
06:44
we can see this very easily. And of course, we can just close this off to continue to do whatever we need to do. So they are the form basics.
06:52
We've looked at a couple of things here. We've looked at wire model, which will hook that up to whatever public properties we create. And we can create as many of these as we want.
07:02
We've looked at a new event handler directly on our form. And we've looked at a couple of modifiers. We've also looked at that really important live modifier, which is by default in Livewire 3 not there
07:14
because we want to save as many network requests as we can. So that is the basics of hooking stuff up into forms. Let's take this a little step further in the next episode and actually get this book created out.

Episode summary

In this episode, we dive straight into working with forms in Livewire, which is a super important part of pretty much any app. We'll start simple: our main goal is to get some input (like a book title) into a form and see how Livewire binds that data so we can use it later—like, eventually, creating new records in our database and keeping our book list updated.

We'll build our form right in the book index component for now (don't worry, we'll split it up for better structure later). You'll see how easy it is to set up a standard HTML form, and more importantly, how Livewire lets us connect our form inputs to data properties in the component using wire:model. We talk about how this two-way binding works—if you've used other frameworks like Vue, this will feel familiar.

There's a key difference between Livewire versions: in Livewire 3, data isn't synced to the backend on every keystroke by default (which saves on network requests), unlike previous versions. We'll see how adding "modifiers" to wire:model can bring back more live updates when you need them, like for a search field.

The episode also shows you how to handle form submissions by adding wire:submit.prevent to the form. This avoids the default browser behavior and lets you run a method in your component directly when the form's submitted. You'll be able to access the input data easily in your method, and we even use dd (die and dump) to check that what we're getting from the form is exactly what we expect.

By the end of the episode, you'll understand the basics of binding form data in Livewire, handling submits, and controlling when component data updates. Next time, we'll actually save the new book to the database!

Episode discussion

No comments, yet. Be the first!