All language subtitles for 10. Handling Text Input

Last piece of input that we need to track from a user is the length of password that they want to have.

We need to add one more event listener inside of here.

We need to watch for whatever user types inside there take that value and stored as another property

on our class.

Just like we saw on that diagram back over here.

This is going to be very similar to all the checkboxes we put together.

There's just going to be one very small difference though with those different checkboxes.

We were watching for a event called A Change event.

In the case of this input we're going to watch for a slightly different type of event an event called

an input event.

I want to give you a quick reminder on how we generally handle input events with normal javascript.

And we'll take that knowledge and apply it to the world of angular once again.

I've got a very quick code snippet that I want to show you though in this snippet.

I've got a normal HDL element that is a input element down here.

I wrote out some javascript code to take a look and find that element.

So I've got a reference to it right here.

Then add on an event listener and I watch for type input.

That is the event I'm looking for.

Then if I want to get the value out of that input I take the event object that is provided.

Anytime that event listeners triggered and to actually read the value out of the input we reference

event not target not value though in this case I'm just taking that value in console logging it.

So if I test out this application now I've got a little console down here and here's the input up here.

I'll type in like 1 two 3 and every single time I press a key I see an update down inside the console

specifically.

The value gets logged out of four five six seven and so on but that is the mechanism we're going to

use very similar for getting the value out of our text input but we're going to be doing it in a kind

of angular fashion before we go and write the angular code.

One other very quick thing I want to point out here because this is going to be very relevant very quickly.

Notice how if we enter in a number to this text input it is provided to us as a string.

So even though it looks to me like we entered a no javascript is always going to treat the value of

an input as a string.

Like I said that's gonna be very relevant in just a moment.

OK.

Let's go back over to our editor.

We're going to add in an event handler to this input right here.

We're going to need to make sure that we kind of handle this same kind of idea of getting the event

object and getting the value off the target property the back inside.

My editor I'm going to go to my component template file.

Here it is right here.

I'm going to go to the very top and I'll find the inputs meant for managing the length of password and

on there I'm going to enter in a event handler binding so remember we put in the parentheses and then

the name of the event.

So in this case we don't want the change event which only gets triggered on a text and put after user

finishes a change and then clicks out of the input instead we want to watch for the input event.

So we're going to put in the name right here of input we'll then put in our equals sign and our double

quotes but just like we have on our other event handlers will then add in a method to call right here.

But let's try calling How about a method named on change length and we'll call it like so.

Now once again this method is not defined you and I have to define it ourselves on our component class.

But first we need to remember that any time we received this input event if we want to get access to

the value inside of that input just like we saw over on this example we have to get access to that event

object in the world of angular that is just a little bit awkward.

Remember this right here gets evaluated as though it were code so inside that kind of scope that we

can kind of imagine exists inside of these double quotes.

We get access to a very special variable all the events object and it is identical to that event object

over here.

There's just one twist about it in order to access that even object we put in dollar sign event but

this is the same event object that we just saw back in that JavaScript example.

The only difference is that we access it by putting dollar sign right in front of it.

Now this doesn't mean that there's like some very special new fangled thing inside the world of JavaScript.

Remember dollar sign is a valid javascript identifier so we can have a variable named dollar sign event

that is totally fine.

It just turns out that the people behind angular decided to make the event object available to us inside

of this little area as a variable called Dollar Sign event.

So now to actually get whatever the user entered in there just like we saw in the javascript example

we will chain on that target that value.

So now our method is going to be called with whatever the user just typed into that input it let's say

this file will then go back over to our component class and we'll add in the on change like method back

over here right above all of our other methods.

I'll add in on change length but this is going to be called whatever the user just entered into that

text input I can receive that as a variable that I will call about value and when I type out value right

there I'm going to get a little kind of dot dot dot underline on it.

That means that JavaScript or technically typescript here because that is what we are actually writing

is kind of complaining about what's going on.

We're going to add in just a little bit of additional syntax to this thing just to keep typescript from

complaining.

We'll discuss exactly what this additional syntax does in just a moment along with a lot of other things

inside this file but right now let's just add the extra little bit of syntax on let's say value than

colon and string.

All right.

So now just like before we need to declare a property that is going to store the length that the user

just entered.

So at the top right next to all these other properties I'm going to add in a another property that we'll

call length and I'm going to initialize it with a value of 0 but then down inside of unchanged link

we can take whatever value the user just entered into the input and we can assign it to the length property.

Just one thing.

Remember whenever a user types something into a text input we receive it as a string though value right

here really is a string and we don't want to assign a string to length length is supposed to be a number

indicating the number of characters inside the generated password.

We just need to make sure that we pass that value variable right there and pull a number out of that

string.

But to do so we will say const asked value is ours int value but now past value is a actual number one

other very small thing to be aware of here.

If a user enters in just like some letters into that password input and past value right here will come

back to us as not a number.

Let me show you what I mean really quickly.

I can open up my terminal and I'll put in pass it and I'll just type in some letters like so so if I

run that I get back not a number but just to make sure that a user doesn't enter in some numbers like

that right there are letters like that right there which should be very bad for application.

Let's just do a really quick update or a quick check inside here.

We'll say if not is not a number.

This is a built in function site a javascript to check to see if we are taking a look at not no will

pass in past value though if a user did not enter a number here we're not going to enter the if statement.

If they did enter number then we'll go inside.

So for inside there then we can take the pass value and use it to update the length property.

We'll say this dot link is art value so okay.

Love video.

I know but we definitely got this on lock down now and hopefully you've got a really good idea of what's

going on.

I think that we've got just about all the data that we need to do our final password generation though.

One more pause right here and we'll take all of our information the length these flags and so on and

then use it to generate our random password.