All right, so I've done a little bit of coding between our lessons. ts file. Here I've defined a wait function, and all this function really does is return a new promise, which resolves after a certain number of milliseconds. This was just a nice way for me to wait a certain amount of time using the async await syntax as opposed to set timeout with a callback function.
view, I've added the markup for a login form. If you'd like to get all this exact code that I've added between lessons, I've left a link in the description below to the commit for this. So feel free to grab that, copy it and paste it into your own project. Now you'll notice here that In order to create a form and formkit, we use the exact same component that we use for the inputs.
That is the formkit component. But now we're giving it the type of form. Okay, that's pretty cool. Most of the time we aren't going to be working with inputs without the context of a form.
In other words, we're typically going to put inputs inside of a form. So the question is what does form kit offer us? What is form kit doing for us over and above a regular form element? Let's say that this form is being used for editing an existing resource and it already has some initial values so we could come up here and Create a reactive reference that is an object that contains those initial values The keys in this object will need to line up with the names on the inputs.
So I could have a username, and we'll just give it the default of, we'll say my Twitter handle, danielcallieio. And then for the password, we'll just leave that blank to begin with. Now, in order to provide this to the form, we use the value prop. Then after I hit save, over on the left hand side, you can see my name has been provided to the username field, and the password field is still blank.
Perfect. Handling data this way keeps us from having to bind every single input within the form to a different piece of reactive data. Instead, we define all of our form data at once and then only have to bind it once, which is pretty nice. Now let's take a look at how we might handle the submission of the form.
As you'd expect, I can do at submit here and then provide it a handler function. prevent that you typically have to do on native forms. FormKit already knows that you're going to handle this via JavaScript and that you want to prevent the default behavior. So you can just leave that off.
Now if you did want to submit your form with a complete page refresh like a typical browser form does, you could just leave this at submit off altogether and it will do just that. Let's take a look now at what the submit handler will receive. When you're working with a native form element, I would expect the argument here to be a event. However, when you're working with a form kit form, you actually just get direct access to the data.
Let's just console log that so you can see what I'm talking about. All right. So I've got my handle submit defined here. It is being called on submit form.
Let's add a password in here. I'll just say hello and when I hit submit and Take a look at things in the console. We should see our form data there Let me clear that out because I was playing with this a little bit before the video And I'll submit one more time to make it easier to see alright. Yeah, there's our plain and simple data It's just an object we could do data dot password and get the submitted password and likewise with username Now, when working with FormKit forms, they suggest in the documentation that this is always how you handle your data.
You get it from the argument of the submit handler, and you don't provide vmodel for the form data itself. That can work, but there might be some unexpected issues with it. So prefer to get the data from the submit handler's argument. Since we're submitting a form with JavaScript, it's common that you're going to use an AJAX request in order to post the data to a server.
And while that's going on, it's really good practice to let the user know that the form is submitting. In other words, show them some kind of loading indicator and don't allow them to continue submitting while the original submission is still processing. Let's see how FormKit helps us out here by simulating an AJAX request with our wait function. So here we'll just wait for, let's say, three seconds.
And then only after those three seconds, console log our data. So wait would be like sending the AJAX request to the server and then it taking three seconds to respond. Now I need to await, wait. And since we are using await in here, we need to change this to an async function.
Great. By the way, notice that I didn't have to import wait. js 3. And because we have this defined inside of the utils directory, it's automatically imported for us, which is pretty cool.
Now over in the browser, let's try submitting our form once more. This time we get a loading indicator out of the box for us. And as soon as the three seconds is over, we get the submit button back. Also notice that the button was gray during that time.
That's because it was disabled, meaning the user couldn't resubmit the form. while the form submission was in progress. And we get all this for free just by using the form kit component. In the next lesson, let's take a look at how we can customize this form kit form by providing some props.
All right, so I've done a little bit of coding between our lessons. ts file. Here I've defined a wait function, and all this function really does is return a new promise, which resolves after a certain number of milliseconds. This was just a nice way for me to wait a certain amount of time using the async await syntax as opposed to set timeout with a callback function.
view, I've added the markup for a login form. If you'd like to get all this exact code that I've added between lessons, I've left a link in the description below to the commit for this. So feel free to grab that, copy it and paste it into your own project. Now you'll notice here that In order to create a form and formkit, we use the exact same component that we use for the inputs.
That is the formkit component. But now we're giving it the type of form. Okay, that's pretty cool. Most of the time we aren't going to be working with inputs without the context of a form.
In other words, we're typically going to put inputs inside of a form. So the question is what does form kit offer us? What is form kit doing for us over and above a regular form element? Let's say that this form is being used for editing an existing resource and it already has some initial values so we could come up here and Create a reactive reference that is an object that contains those initial values The keys in this object will need to line up with the names on the inputs.
So I could have a username, and we'll just give it the default of, we'll say my Twitter handle, danielcallieio. And then for the password, we'll just leave that blank to begin with. Now, in order to provide this to the form, we use the value prop. Then after I hit save, over on the left hand side, you can see my name has been provided to the username field, and the password field is still blank.
Perfect. Handling data this way keeps us from having to bind every single input within the form to a different piece of reactive data. Instead, we define all of our form data at once and then only have to bind it once, which is pretty nice. Now let's take a look at how we might handle the submission of the form.
As you'd expect, I can do at submit here and then provide it a handler function. prevent that you typically have to do on native forms. FormKit already knows that you're going to handle this via JavaScript and that you want to prevent the default behavior. So you can just leave that off.
Now if you did want to submit your form with a complete page refresh like a typical browser form does, you could just leave this at submit off altogether and it will do just that. Let's take a look now at what the submit handler will receive. When you're working with a native form element, I would expect the argument here to be a event. However, when you're working with a form kit form, you actually just get direct access to the data.
Let's just console log that so you can see what I'm talking about. All right. So I've got my handle submit defined here. It is being called on submit form.
Let's add a password in here. I'll just say hello and when I hit submit and Take a look at things in the console. We should see our form data there Let me clear that out because I was playing with this a little bit before the video And I'll submit one more time to make it easier to see alright. Yeah, there's our plain and simple data It's just an object we could do data dot password and get the submitted password and likewise with username Now, when working with FormKit forms, they suggest in the documentation that this is always how you handle your data.
You get it from the argument of the submit handler, and you don't provide vmodel for the form data itself. That can work, but there might be some unexpected issues with it. So prefer to get the data from the submit handler's argument. Since we're submitting a form with JavaScript, it's common that you're going to use an AJAX request in order to post the data to a server.
And while that's going on, it's really good practice to let the user know that the form is submitting. In other words, show them some kind of loading indicator and don't allow them to continue submitting while the original submission is still processing. Let's see how FormKit helps us out here by simulating an AJAX request with our wait function. So here we'll just wait for, let's say, three seconds.
And then only after those three seconds, console log our data. So wait would be like sending the AJAX request to the server and then it taking three seconds to respond. Now I need to await, wait. And since we are using await in here, we need to change this to an async function.
Great. By the way, notice that I didn't have to import wait. js 3. And because we have this defined inside of the utils directory, it's automatically imported for us, which is pretty cool.
Now over in the browser, let's try submitting our form once more. This time we get a loading indicator out of the box for us. And as soon as the three seconds is over, we get the submit button back. Also notice that the button was gray during that time.
That's because it was disabled, meaning the user couldn't resubmit the form. while the form submission was in progress. And we get all this for free just by using the form kit component. In the next lesson, let's take a look at how we can customize this form kit form by providing some props.