194. TD Adding Validation to check User Input

Jul 21, 2026 02:03 · 4:14 · English · Whisper Turbo · 2 Speakers
Transkrip iki bakal kadaluwarsa ing 7 dina. Ngoptimalake kanggo panyimpenan permanen →
Indeks Bacaan
Hanya ditampilake
0:02
S… Speaker 1 (194. TD Adding Validation to check User Input)
So as mentioned at the end of the last lecture,
0:04
S… Speaker 1 (194. TD Adding Validation to check User Input)
it would be nice if we could validate the user input,
0:07
S… Speaker 1 (194. TD Adding Validation to check User Input)
something very important in any app you build.
0:10
S… Speaker 1 (194. TD Adding Validation to check User Input)
Whilst you should still validate input on the server,
0:13
S… Speaker 1 (194. TD Adding Validation to check User Input)
as the frontend can always be tricked,
0:16
S… Speaker 1 (194. TD Adding Validation to check User Input)
you can greatly enhance user experience by also validating
0:20
S… Speaker 1 (194. TD Adding Validation to check User Input)
the input here.
0:20
S… Speaker 1 (194. TD Adding Validation to check User Input)
For example,
0:21
S… Speaker 1 (194. TD Adding Validation to check User Input)
we want to make sure that none of the fields here is empty and
0:26
S… Speaker 1 (194. TD Adding Validation to check User Input)
that the email address actually is a valid email address.
0:29
S… Speaker 1 (194. TD Adding Validation to check User Input)
So let's go back to our app component to the HTML file
0:33
S… Speaker 1 (194. TD Adding Validation to check User Input)
to the template.
0:35
S… Speaker 1 (194. TD Adding Validation to check User Input)
and see how we can add such validators.
0:37
S… Speaker 2 (194. TD Adding Validation to check User Input)
Now,
0:38
S… Speaker 1 (194. TD Adding Validation to check User Input)
since we use the template -driven approach,
0:40
S… Speaker 1 (194. TD Adding Validation to check User Input)
we can only add them in the template.
0:43
S… Speaker 1 (194. TD Adding Validation to check User Input)
And here we can,
0:44
S… Speaker 1 (194. TD Adding Validation to check User Input)
for example, add required to our username input.
0:48
S… Speaker 1 (194. TD Adding Validation to check User Input)
Now, required is a default HTML attribute you
0:52
S… Speaker 1 (194. TD Adding Validation to check User Input)
can add to an input.
0:54
S… Speaker 1 (194. TD Adding Validation to check User Input)
Here,
0:55
S… Speaker 1 (194. TD Adding Validation to check User Input)
however, Angular will detect it,
0:57
S… Speaker 1 (194. TD Adding Validation to check User Input)
so it acts as a selector for a built -in directive shipping with Angular.
1:02
S… Speaker 1 (194. TD Adding Validation to check User Input)
And it will automatically configure your form,
1:05
S… Speaker 1 (194. TD Adding Validation to check User Input)
you could say,
1:06
S… Speaker 1 (194. TD Adding Validation to check User Input)
to take this into account to make sure that now this will
1:10
S… Speaker 1 (194. TD Adding Validation to check User Input)
be treated as invalid if,
1:12
S… Speaker 1 (194. TD Adding Validation to check User Input)
well, it is empty.
1:14
S… Speaker 1 (194. TD Adding Validation to check User Input)
And on the email,
1:16
S… Speaker 1 (194. TD Adding Validation to check User Input)
we can,
1:16
S… Speaker 1 (194. TD Adding Validation to check User Input)
for example, therefore also add required.
1:19
S… Speaker 1 (194. TD Adding Validation to check User Input)
And there also is an email.
1:23
S… Speaker 1 (194. TD Adding Validation to check User Input)
Direct if you can add now email is not a bolt in HTML attribute
1:27
S… Speaker 1 (194. TD Adding Validation to check User Input)
It still is a directive and keep in mind required is only treated
1:32
S… Speaker 1 (194. TD Adding Validation to check User Input)
as a selector for an angular directive here an Email is
1:36
S… Speaker 1 (194. TD Adding Validation to check User Input)
simply another directive made available by angular which makes sure
1:40
S… Speaker 1 (194. TD Adding Validation to check User Input)
that this is actually a valid email address So
1:44
S… Speaker 1 (194. TD Adding Validation to check User Input)
now if we save this
1:47
S… Speaker 1 (194. TD Adding Validation to check User Input)
And we have a look at our form here and I submit it.
1:50
S… Speaker 1 (194. TD Adding Validation to check User Input)
I can still submit it because we haven't set up anything which would prevent us from doing
1:54
S… Speaker 1 (194. TD Adding Validation to check User Input)
so.
1:54
S… Speaker 1 (194. TD Adding Validation to check User Input)
But if we have a look at it and check the valid attribute,
1:58
S… Speaker 1 (194. TD Adding Validation to check User Input)
you see it as false.
1:59
S… Speaker 1 (194. TD Adding Validation to check User Input)
And if I enter something here,
2:02
S… Speaker 1 (194. TD Adding Validation to check User Input)
enter something here,
2:04
S… Speaker 1 (194. TD Adding Validation to check User Input)
so it's filled,
2:05
S… Speaker 1 (194. TD Adding Validation to check User Input)
but the email address is still not valid.
2:07
S… Speaker 1 (194. TD Adding Validation to check User Input)
You see that still valid is false.
2:11
S… Speaker 1 (194. TD Adding Validation to check User Input)
Only if I turn this into a valid email address here,
2:14
S… Speaker 1 (194. TD Adding Validation to check User Input)
only in this case.
2:16
S… Speaker 1 (194. TD Adding Validation to check User Input)
Now if we submit it,
2:17
S… Speaker 1 (194. TD Adding Validation to check User Input)
now you see valid is true.
2:19
S… Speaker 1 (194. TD Adding Validation to check User Input)
So now Angular tracks the state of this form and correctly
2:24
S… Speaker 1 (194. TD Adding Validation to check User Input)
informs us or gives us a chance of querying it whether this form
2:28
S… Speaker 1 (194. TD Adding Validation to check User Input)
is valid or not.
2:29
S… Speaker 1 (194. TD Adding Validation to check User Input)
And actually this does not only work on form level.
2:33
S… Speaker 1 (194. TD Adding Validation to check User Input)
If we dive into the actual controls,
2:35
S… Speaker 1 (194. TD Adding Validation to check User Input)
you see that on the email control,
2:37
S… Speaker 1 (194. TD Adding Validation to check User Input)
we also have a valid attribute.
2:41
S… Speaker 1 (194. TD Adding Validation to check User Input)
which is true.
2:42
S… Speaker 1 (194. TD Adding Validation to check User Input)
So it tracks this on a per control level
2:46
S… Speaker 1 (194. TD Adding Validation to check User Input)
and then also on a form level.
2:49
S… Speaker 2 (194. TD Adding Validation to check User Input)
Now,
2:50
S… Speaker 1 (194. TD Adding Validation to check User Input)
there also is another place where it tracks this
2:54
S… Speaker 1 (194. TD Adding Validation to check User Input)
and helps us.
2:55
S… Speaker 1 (194. TD Adding Validation to check User Input)
If we inspect this email element here in
2:59
S… Speaker 1 (194. TD Adding Validation to check User Input)
the HTML code,
3:01
S… Speaker 1 (194. TD Adding Validation to check User Input)
You see that it adds a couple of classes because the form
3:05
S… Speaker 1 (194. TD Adding Validation to check User Input)
control class here is by us.
3:07
S… Speaker 1 (194. TD Adding Validation to check User Input)
It's a bootstrap class to give it some styling.
3:09
S… Speaker 1 (194. TD Adding Validation to check User Input)
But ngDirty,
3:10
S… Speaker 1 (194. TD Adding Validation to check User Input)
ngTouched and ngValid,
3:13
S… Speaker 1 (194. TD Adding Validation to check User Input)
these are not classes added by us.
3:15
S… Speaker 1 (194. TD Adding Validation to check User Input)
And the ng at the beginning makes it pretty clear who is responsible for adding
3:20
S… Speaker 1 (194. TD Adding Validation to check User Input)
these classes.
3:21
S… Speaker 1 (194. TD Adding Validation to check User Input)
Now watch these classes if I remove the
3:25
S… Speaker 1 (194. TD Adding Validation to check User Input)
add sign here.
3:26
S… Speaker 1 (194. TD Adding Validation to check User Input)
You saw that ng -invalid was added and ng
3:30
S… Speaker 1 (194. TD Adding Validation to check User Input)
-valid was removed.
3:32
S… Speaker 1 (194. TD Adding Validation to check User Input)
So Angular dynamically adds some classes,
3:35
S… Speaker 1 (194. TD Adding Validation to check User Input)
giving us information,
3:37
S… Speaker 1 (194. TD Adding Validation to check User Input)
some CSS classes,
3:38
S… Speaker 1 (194. TD Adding Validation to check User Input)
giving us information about the state of the individual control here.
3:42
S… Speaker 1 (194. TD Adding Validation to check User Input)
Whether it is dirty or not,
3:44
S… Speaker 1 (194. TD Adding Validation to check User Input)
so whether we did change the initial value.
3:47
S… Speaker 1 (194. TD Adding Validation to check User Input)
Whether it is touched or not,
3:49
S… Speaker 1 (194. TD Adding Validation to check User Input)
so whether we clicked into it or not.
3:51
S… Speaker 1 (194. TD Adding Validation to check User Input)
And whether it is valid or not.
3:54
S… Speaker 1 (194. TD Adding Validation to check User Input)
Now with that information,
3:55
S… Speaker 1 (194. TD Adding Validation to check User Input)
we can style these inputs conditionally.
3:58
S… Speaker 1 (194. TD Adding Validation to check User Input)
So let's in the next lecture take advantage of the fact that Angular
4:03
S… Speaker 1 (194. TD Adding Validation to check User Input)
tracks the state of the validity and of the form overall and change
4:07
S… Speaker 1 (194. TD Adding Validation to check User Input)
the styling and the behavior the user experience with that form.

Transkripsi ieu dihasilkeun ku AI (ngartos basa otomatis). Bisa aya kasalahan - verifikasi kana audio asli pikeun kaperluan kritis. Kebijakan AI

❤️ Love STT.ai? Nyathet kanca-kanca!
Ringkasan
Klik Ringkasan kanggo nyipta ringkasan AI saka transkripsi iki.
Mengumpulkan...
Tanya AI Ngendi iki Transkrip
Saben wangun wangun bisa digolongake dadi: wangun umum wangun khusus
_Unggah