Form Utility Component

In This Lesson

We'll start a form utility component. This component will allow us to create one central location where we can maintain our forms and provide additional functionality like simplified method spoofing.

Created by: @tomgobich
Published: 2 years ago

Join the Discussion 0 comments

Be the first to comment!

Transcript

- So we're gonna take a second here to deviate away from the Pines UI and add in our own component that they don't have within there. That's strictly just code-based
and we won't see it visually on our page. And that's the form element. Now there's several reasons why I like to add a form component into my project. First of which is if you're using CSRF protection
within Shield here, go down to CSRF protection right down here. If you have that enabled, which if you're working with EdgeJS, you most likely do, then we can simply call the CSRF field
in one centralized location inside of our form component to add it to all of our forms so that we don't necessarily have to remember it. So in addition to the CSRF field, down the road if you were in need to add anything at all
to your forms throughout your application, you could do so in that one centralized form component location. For example, adding something like Cloudflare turnstile or adding a honeypot to all of your forms,
you can simply do so within that one centralized location and it will cascade through all of your usages of your form component. Another reason why is if we dive into our app config now
and we scroll down just a little bit, if you have allow method spoofing turned on, which I'm gonna do right here for this, this essentially allows us to add a underscore method
query string onto our action URL. And this will allow AdonisJS to recognize that the request isn't necessarily a post request, but instead we can specify that the underscore method
should be a put patch delete and so on request and AdonisJS will match that up to the appropriate route within our application. And we can use our form component to kind of clean that up a little bit
by allowing us to specify that the form should be a particular method instead of having to manually add that onto our actions URL. Now there's several different ways you can go about that.
For us in this series, we're gonna be doing the at form and then we can specify the particular methods. So we can do post, patch or delete to call that particular method.
And we'll also have an underlying form component with which we can pass in a specific method and it will handle it that way as well. All right, so let's go ahead and get started. So I'm gonna collapse down our config.
We need to add in a new component page. Just gonna copy our button page here and we'll paste this into our components and we'll rename this form.
Get rid of everything except for that base implementation. And we'll say our button is now our base form. Then we can also get rid of this alert here as well.
Let's add it into our list by diving into our routes. Go ahead and keep this alphabetical so we'll add it after button. And before we get too far, we're gonna need some actual routes to hit with our form
so that we can test things out. So let's go ahead and add those in here now. So we'll do route.post and we don't need to call this anything fancy. So we'll do just slash form
since we're just testing out our form with it. We can do these in line. So we'll take in our request and our response. And just so that we know that we hit the correct HTTP method here,
let's go ahead and console.log. Let's do method and then we'll do request. And there should be a method called method right there. So we'll just go ahead and call that.
This will return back whether or not the request was a post put patch or a delete. Again, we're just adding this in so that we can verify that we actually hit the correct HTTP request
for our form submissions. Missed my arrow in my arrow function. Let's go ahead and add that in. And then lastly, we just need to return and return ourselves back to the previous page.
So let's just return response redirect back to go back to the previous page. So let's go ahead and copy that, paste this in here for our put patch and our delete.
So here we can do route.put, route.patch and route.delete. Cool, so now we have our various HTTP methods for our forms. Let's go ahead and next add in a file for our base form.
So let's do a new file there, form and then index.edge. So first things first, we're gonna need some kind of a form element here. So let's go ahead and add that in. And next we'll add in our children
by doing await slots.main, there we go. So now we can actually add in our form fields as the direct children to our form component here. Let's allow ourselves to add any attribute
onto our form element by doing prompts, serialize, accept. We'll just add that in as an empty array for right now. And then since we do have CSRF protection on,
we'll go ahead and add in our CSRF field inside of our form as well. We will always want the form to be a method of post so that the browser and the underlying Node.js server
actually understands the request that we're sending out. We'll specify the actual method that our AdonisJS server should match our routes against
by having our action URL be something like /form since that's what all of our test routes are using. And then as the query string,
it will have on it, _method equals, and then the actual method that we want to use for the submission. So if we wanna reach our route.patch, we would send patch there.
If we wanna do a put, we would do put there. And AdonisJS will match that against the applicable route as we'll see whenever we actually send these requests out. So in terms of our action prop,
although we want to be in charge of sending is the actual URL that we should be hitting with our request. So for example, for this component, whenever we add in the action,
we just want to have to submit /form. And then the component here should be in charge of determining whether or not we also want a put patch or a delete request.
And we'll have a separate method prop specifically for that to determine that within this index method. And if it's a put patch or a delete, we'll then suffix onto the URL, our _method equals,
and then whatever that desired HTTP method is. So within our serialize_except, we want to ignore method because on the form itself, we already have that. And we know that we're going to be passing in as a prop,
the desired method, not the actual method for our AdonisJS server to use. And then we're gonna need to mutate the action that we want to have for our form. So let's go ahead and add that
into the serialize_except as well. Okay, cool. So this looks like a good spot to stop for right now. In the next lesson, we'll take a look at actually setting our action for the appropriate method that we desire
for this form submission.

EdgeJS Components

25 Lessons

1h 42m

Getting Started

Components Overview

Button Component

Alert Component

Accordion Component

Form Component

Stop losing your best ideas!

Use our integrated note feature to capture and organize your key insights. Take a note at any timestamp and jump instantly back to that moment in the video with a single click.