Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,740 --> 00:00:05,930
Last piece of input that we need to track from a user is the length of password that they want to have.
2
00:00:05,950 --> 00:00:08,300
We need to add one more event listener inside of here.
3
00:00:08,320 --> 00:00:12,850
We need to watch for whatever user types inside there take that value and stored as another property
4
00:00:12,850 --> 00:00:13,990
on our class.
5
00:00:13,990 --> 00:00:17,480
Just like we saw on that diagram back over here.
6
00:00:17,710 --> 00:00:20,620
This is going to be very similar to all the checkboxes we put together.
7
00:00:20,620 --> 00:00:25,210
There's just going to be one very small difference though with those different checkboxes.
8
00:00:25,210 --> 00:00:28,620
We were watching for a event called A Change event.
9
00:00:28,930 --> 00:00:33,670
In the case of this input we're going to watch for a slightly different type of event an event called
10
00:00:33,730 --> 00:00:35,730
an input event.
11
00:00:35,730 --> 00:00:40,550
I want to give you a quick reminder on how we generally handle input events with normal javascript.
12
00:00:40,550 --> 00:00:44,760
And we'll take that knowledge and apply it to the world of angular once again.
13
00:00:44,800 --> 00:00:50,030
I've got a very quick code snippet that I want to show you though in this snippet.
14
00:00:50,130 --> 00:00:54,510
I've got a normal HDL element that is a input element down here.
15
00:00:54,510 --> 00:00:58,600
I wrote out some javascript code to take a look and find that element.
16
00:00:58,620 --> 00:01:00,650
So I've got a reference to it right here.
17
00:01:00,690 --> 00:01:04,140
Then add on an event listener and I watch for type input.
18
00:01:04,140 --> 00:01:06,360
That is the event I'm looking for.
19
00:01:06,600 --> 00:01:11,990
Then if I want to get the value out of that input I take the event object that is provided.
20
00:01:12,110 --> 00:01:17,070
Anytime that event listeners triggered and to actually read the value out of the input we reference
21
00:01:17,190 --> 00:01:23,450
event not target not value though in this case I'm just taking that value in console logging it.
22
00:01:23,540 --> 00:01:28,040
So if I test out this application now I've got a little console down here and here's the input up here.
23
00:01:28,280 --> 00:01:34,400
I'll type in like 1 two 3 and every single time I press a key I see an update down inside the console
24
00:01:34,700 --> 00:01:35,300
specifically.
25
00:01:35,330 --> 00:01:42,730
The value gets logged out of four five six seven and so on but that is the mechanism we're going to
26
00:01:42,730 --> 00:01:47,740
use very similar for getting the value out of our text input but we're going to be doing it in a kind
27
00:01:47,740 --> 00:01:51,750
of angular fashion before we go and write the angular code.
28
00:01:51,790 --> 00:01:56,100
One other very quick thing I want to point out here because this is going to be very relevant very quickly.
29
00:01:56,140 --> 00:02:01,950
Notice how if we enter in a number to this text input it is provided to us as a string.
30
00:02:01,960 --> 00:02:06,730
So even though it looks to me like we entered a no javascript is always going to treat the value of
31
00:02:06,730 --> 00:02:08,500
an input as a string.
32
00:02:08,680 --> 00:02:11,500
Like I said that's gonna be very relevant in just a moment.
33
00:02:12,990 --> 00:02:13,370
OK.
34
00:02:13,420 --> 00:02:14,920
Let's go back over to our editor.
35
00:02:15,160 --> 00:02:18,390
We're going to add in an event handler to this input right here.
36
00:02:18,430 --> 00:02:22,630
We're going to need to make sure that we kind of handle this same kind of idea of getting the event
37
00:02:22,660 --> 00:02:27,480
object and getting the value off the target property the back inside.
38
00:02:27,480 --> 00:02:31,350
My editor I'm going to go to my component template file.
39
00:02:31,630 --> 00:02:33,440
Here it is right here.
40
00:02:33,590 --> 00:02:40,600
I'm going to go to the very top and I'll find the inputs meant for managing the length of password and
41
00:02:40,660 --> 00:02:46,150
on there I'm going to enter in a event handler binding so remember we put in the parentheses and then
42
00:02:46,150 --> 00:02:47,980
the name of the event.
43
00:02:48,040 --> 00:02:52,870
So in this case we don't want the change event which only gets triggered on a text and put after user
44
00:02:53,200 --> 00:02:58,660
finishes a change and then clicks out of the input instead we want to watch for the input event.
45
00:02:58,650 --> 00:03:05,850
So we're going to put in the name right here of input we'll then put in our equals sign and our double
46
00:03:05,850 --> 00:03:12,170
quotes but just like we have on our other event handlers will then add in a method to call right here.
47
00:03:12,180 --> 00:03:19,530
But let's try calling How about a method named on change length and we'll call it like so.
48
00:03:19,530 --> 00:03:24,890
Now once again this method is not defined you and I have to define it ourselves on our component class.
49
00:03:25,140 --> 00:03:30,240
But first we need to remember that any time we received this input event if we want to get access to
50
00:03:30,240 --> 00:03:36,300
the value inside of that input just like we saw over on this example we have to get access to that event
51
00:03:36,330 --> 00:03:42,460
object in the world of angular that is just a little bit awkward.
52
00:03:42,590 --> 00:03:48,290
Remember this right here gets evaluated as though it were code so inside that kind of scope that we
53
00:03:48,290 --> 00:03:51,430
can kind of imagine exists inside of these double quotes.
54
00:03:51,590 --> 00:03:58,760
We get access to a very special variable all the events object and it is identical to that event object
55
00:03:58,790 --> 00:03:59,420
over here.
56
00:03:59,420 --> 00:04:07,360
There's just one twist about it in order to access that even object we put in dollar sign event but
57
00:04:07,440 --> 00:04:11,030
this is the same event object that we just saw back in that JavaScript example.
58
00:04:11,050 --> 00:04:16,070
The only difference is that we access it by putting dollar sign right in front of it.
59
00:04:16,170 --> 00:04:21,310
Now this doesn't mean that there's like some very special new fangled thing inside the world of JavaScript.
60
00:04:21,310 --> 00:04:27,490
Remember dollar sign is a valid javascript identifier so we can have a variable named dollar sign event
61
00:04:27,520 --> 00:04:28,900
that is totally fine.
62
00:04:28,900 --> 00:04:34,270
It just turns out that the people behind angular decided to make the event object available to us inside
63
00:04:34,270 --> 00:04:39,390
of this little area as a variable called Dollar Sign event.
64
00:04:39,400 --> 00:04:43,810
So now to actually get whatever the user entered in there just like we saw in the javascript example
65
00:04:44,320 --> 00:04:50,490
we will chain on that target that value.
66
00:04:50,500 --> 00:04:57,300
So now our method is going to be called with whatever the user just typed into that input it let's say
67
00:04:57,300 --> 00:05:05,020
this file will then go back over to our component class and we'll add in the on change like method back
68
00:05:05,020 --> 00:05:08,370
over here right above all of our other methods.
69
00:05:08,370 --> 00:05:15,940
I'll add in on change length but this is going to be called whatever the user just entered into that
70
00:05:15,940 --> 00:05:23,350
text input I can receive that as a variable that I will call about value and when I type out value right
71
00:05:23,350 --> 00:05:27,040
there I'm going to get a little kind of dot dot dot underline on it.
72
00:05:27,130 --> 00:05:31,600
That means that JavaScript or technically typescript here because that is what we are actually writing
73
00:05:31,930 --> 00:05:34,210
is kind of complaining about what's going on.
74
00:05:34,210 --> 00:05:38,770
We're going to add in just a little bit of additional syntax to this thing just to keep typescript from
75
00:05:38,770 --> 00:05:39,880
complaining.
76
00:05:39,880 --> 00:05:44,380
We'll discuss exactly what this additional syntax does in just a moment along with a lot of other things
77
00:05:44,380 --> 00:05:50,900
inside this file but right now let's just add the extra little bit of syntax on let's say value than
78
00:05:50,940 --> 00:05:55,020
colon and string.
79
00:05:55,140 --> 00:05:55,400
All right.
80
00:05:55,410 --> 00:06:00,750
So now just like before we need to declare a property that is going to store the length that the user
81
00:06:00,750 --> 00:06:02,010
just entered.
82
00:06:02,010 --> 00:06:06,870
So at the top right next to all these other properties I'm going to add in a another property that we'll
83
00:06:06,870 --> 00:06:15,590
call length and I'm going to initialize it with a value of 0 but then down inside of unchanged link
84
00:06:15,890 --> 00:06:21,950
we can take whatever value the user just entered into the input and we can assign it to the length property.
85
00:06:22,100 --> 00:06:23,030
Just one thing.
86
00:06:23,030 --> 00:06:30,360
Remember whenever a user types something into a text input we receive it as a string though value right
87
00:06:30,360 --> 00:06:35,940
here really is a string and we don't want to assign a string to length length is supposed to be a number
88
00:06:36,030 --> 00:06:39,780
indicating the number of characters inside the generated password.
89
00:06:39,840 --> 00:06:45,030
We just need to make sure that we pass that value variable right there and pull a number out of that
90
00:06:45,030 --> 00:06:45,960
string.
91
00:06:46,220 --> 00:06:58,620
But to do so we will say const asked value is ours int value but now past value is a actual number one
92
00:06:58,620 --> 00:07:00,590
other very small thing to be aware of here.
93
00:07:00,630 --> 00:07:05,700
If a user enters in just like some letters into that password input and past value right here will come
94
00:07:05,700 --> 00:07:08,050
back to us as not a number.
95
00:07:08,130 --> 00:07:10,220
Let me show you what I mean really quickly.
96
00:07:10,290 --> 00:07:16,880
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
97
00:07:16,880 --> 00:07:21,530
run that I get back not a number but just to make sure that a user doesn't enter in some numbers like
98
00:07:21,530 --> 00:07:25,600
that right there are letters like that right there which should be very bad for application.
99
00:07:25,730 --> 00:07:29,480
Let's just do a really quick update or a quick check inside here.
100
00:07:29,480 --> 00:07:35,130
We'll say if not is not a number.
101
00:07:35,210 --> 00:07:41,500
This is a built in function site a javascript to check to see if we are taking a look at not no will
102
00:07:41,500 --> 00:07:49,270
pass in past value though if a user did not enter a number here we're not going to enter the if statement.
103
00:07:49,390 --> 00:07:52,070
If they did enter number then we'll go inside.
104
00:07:52,130 --> 00:07:56,980
So for inside there then we can take the pass value and use it to update the length property.
105
00:07:57,040 --> 00:08:02,690
We'll say this dot link is art value so okay.
106
00:08:02,790 --> 00:08:03,370
Love video.
107
00:08:03,370 --> 00:08:08,020
I know but we definitely got this on lock down now and hopefully you've got a really good idea of what's
108
00:08:08,020 --> 00:08:09,290
going on.
109
00:08:09,370 --> 00:08:13,880
I think that we've got just about all the data that we need to do our final password generation though.
110
00:08:13,900 --> 00:08:19,360
One more pause right here and we'll take all of our information the length these flags and so on and
111
00:08:19,360 --> 00:08:21,460
then use it to generate our random password.
12443
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.