All language subtitles for 10. Handling Text Input6

af Afrikaans
ak Akan
sq Albanian
am Amharic
ar Arabic
hy Armenian
az Azerbaijani
eu Basque
be Belarusian
bem Bemba
bn Bengali
bh Bihari
bs Bosnian
br Breton
bg Bulgarian
km Cambodian
ca Catalan
chr Cherokee
ny Chichewa
zh-CN Chinese (Simplified)
zh-TW Chinese (Traditional)
co Corsican
hr Croatian
cs Czech
da Danish
nl Dutch
en English
eo Esperanto
et Estonian
ee Ewe
fo Faroese
tl Filipino
fi Finnish
fr French Download
fy Frisian
gaa Ga
gl Galician
ka Georgian
de German
el Greek
gn Guarani
gu Gujarati
ht Haitian Creole
ha Hausa
haw Hawaiian
iw Hebrew
hi Hindi
hu Hungarian
is Icelandic
ig Igbo
id Indonesian
ia Interlingua
ga Irish
it Italian
ja Japanese
jw Javanese
kn Kannada
kk Kazakh
rw Kinyarwanda
rn Kirundi
kg Kongo
ko Korean
kri Krio (Sierra Leone)
ku Kurdish
ckb Kurdish (Soranî)
ky Kyrgyz
lo Laothian
la Latin
lv Latvian
ln Lingala
lt Lithuanian
loz Lozi
lg Luganda
ach Luo
mk Macedonian
mg Malagasy
ms Malay
ml Malayalam
mt Maltese
mi Maori
mr Marathi
mfe Mauritian Creole
mo Moldavian
mn Mongolian
sr-ME Montenegrin
ne Nepali
pcm Nigerian Pidgin
nso Northern Sotho
no Norwegian
nn Norwegian (Nynorsk)
oc Occitan
or Oriya
om Oromo
ps Pashto
fa Persian
pl Polish
pt-BR Portuguese (Brazil)
pt-PT Portuguese (Portugal)
pa Punjabi
qu Quechua
ro Romanian
rm Romansh
nyn Runyakitara
ru Russian
gd Scots Gaelic
sr Serbian
sh Serbo-Croatian
st Sesotho
tn Setswana
crs Seychellois Creole
sn Shona
sd Sindhi
si Sinhalese
sk Slovak
sl Slovenian
so Somali
es Spanish
es-419 Spanish (Latin American)
su Sundanese
sw Swahili
sv Swedish
tg Tajik
ta Tamil
tt Tatar
te Telugu
th Thai
ti Tigrinya
to Tonga
lua Tshiluba
tum Tumbuka
tr Turkish
tk Turkmen
tw Twi
ug Uighur
uk Ukrainian
ur Urdu
uz Uzbek
vi Vietnamese
cy Welsh
wo Wolof
xh Xhosa
yi Yiddish
yo Yoruba
zu Zulu
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.