Creating An EdgeJS Form Input Component

In This Lesson

We'll create a form input component with EdgeJS to simplify adding inputs throughout our application and to extract away old value and validation error logic.

Created by: @tomgobich
Published: 1 year ago

Join the Discussion 0 comments

Be the first to comment!

Transcript

So we have a reusable portion of code here that's forming within our register page.
We have our label span input input error, displaying our error messages, as well as our old value population within that input happening,
not just with the full name, but with our email, but our password field as well. And whenever we're building out our applications, whenever we sense that reusability happening, it would be great to extract that out
into a reusable portion of code. Since we're in Edge, that's gonna be a component. So within our resources, views components, let's right click on our component directory, new file.
We'll put this inside of a folder called form and we'll do slash and call our file input.edge. Let's jump back into our register page and give one of our inputs here a copy from label to label
and dump that inside of our input.edge file. So there's a few things within here that we need to make dynamic. First, our label, and we can make this optional as well.
Our input type, the name of the input, and the name of the input gets reused in a couple of places, not just with the name attribute, but we can also use it when grabbing our old value
in our input error here as well. So up at the top of this file, let's normalize all of the things that could be nullable, like our old value, because if we don't provide in a name,
we should be able to gracefully handle that. So let's at let value old. This will be our old value that was submitted with the previous form submission if we have one.
So this is going to replace our old password right here. We'll have this equal. Now we wanna check whether or not we've provided in a name. If we have, then we'll wanna check our old method. And if we haven't, we'll bypass that old method
and just set the default value to an empty string. So we can do a ternary check directly on our name. And if that comes back truthy, we'll do old, whatever that name is. Otherwise, we'll just default to an empty string.
Now we wanna do something similar for just our value. We're going to want to allow ourselves to provide in a manual value from outside of this component. And since we're assigning value here,
we'll want to check that directly on the props object to see whether or not we're providing a value in as the props. If we are, we'll go ahead and use that value. Otherwise, we'll default to our value old.
Then we can go ahead and replace our old check down here with just our value. So if we provide a value from outside of this component, that will get used. Otherwise, it will use our old value,
which checks whether or not we have a name. And if we have a name, then it will attempt to use the old value if there is one. Otherwise, it will just set it to an empty string. And then to protect ourselves from potential undefined
values from either outside of this component or via our old check, we'll leave the default value of an empty string within the value attribute as well. Now we just wanna do something relatively similar for the name.
So if we have a name, we'll go ahead and use it. Otherwise, we'll just set that to an empty string so that we don't provide undefined into the name here. Same thing for our type. If we have a type, we'll use it.
Otherwise, we'll default to a type of text. So that's our input out of the way. Next, let's take care of our input error. So if we don't provide a name into this input component,
we'll just bypass this input error altogether. So we can cut this out, do an @if name, and then end our if and paste the contents within the if. So if we have a name,
then we'll attempt to check our input error. And if we have an input error, then our paragraph with text red will get applied. All right, awesome. So next up is our label. So first we're gonna want the value here
to print out whatever label value is we provide into this component. Now, it would be great to also offer slots. So we could do an @if slots label @else,
and then end our if. For the else, we'll paste our label back in. And then for the if, we'll do our three curly braces, await, and then render out our slots.label. And then for the span as a whole,
we'll do an @if slots.label or label. And then down at the end of our span, we'll end that if. So let's pause here and see what we got. So let's go back into our register page
and let's scroll up to our full name. Above our full name, we'll keep everything as is for right now. Let's do @form input and then provide in our props.
So for our label, we'll do full name. For the input name, we'll do full name in camel case. And since we're not providing in a slot,
we'll go ahead and make this a self-closing component by adding in an exclamation point after the @ symbol. Okay, cool. So now if we did everything correctly, we should see two full name inputs,
one for the one that we've manually defined and one for our form input component. So let's give that a save and let's jump back into our browser. And look at that, there's our full name there and our full name there.
Cool, so let's hide that back away and let's get rid of our manual input and let's fill out the rest of them here as well.
So @!form input label email, name email. And for this one, we also want the input type to be email. Okay, we have one more.
So @form input label password, name password, and then lastly, we want that input type to be password so that it doesn't register out as plain text on the input field.
Then we can go ahead and get rid of our manual inputs here. So now we've simplified and replaced that duplicate logic that we had going on to render out our registered input
fields and this paves way for us to be able to easily add inputs anywhere throughout our application. So let's dive back into our browser. Everything still looks okay here.
Let's attempt to do john test@test.com with some invalid password again. And okay, looks like they're all using the password validation.
So I bet within our component, I forgot to update. Yep, sure enough right here, our input error should definitely be using the name that we provided
to check for the applicable error here. So we'll save that, jump back into our browser and let's give that one more round of john test@test.com some invalid password, run that. There we go, okay, cool.
So our full name was valid, our email was invalid due to it being already taken and our password field must have at least eight characters. In addition to our inputs being invalid,
we've also repopulated the email and full name just as it was whenever we were manually handling all of this, except now it's being done automatically by our input component.

Let's Learn AdonisJS 6

113 Lessons

14h 15m

Introduction

Fundamentals

Building Views with EdgeJS

Database and Lucid ORM Basics

Lucid ORM Relationships

Working With Forms

Authentication & Middleware

Filtering and Paginating Queries

User Watchlist

User Profiles

Admin Panel

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.