196. TD Using the Form State

Jul 21, 2026 02:05 · 4:27 · English · Whisper Turbo · 1 Hátalar
Þessi afritunarskrá rennur út í 7 10 daga. Uppfærsla fyrir varanlega geymslu →
Yfirlit yfir fyrirlestra
Sýna aðeins
0:02
S… Speaker 1 (196. TD Using the Form State)
In the last lecture we found out that Angular tracks the state of
0:06
S… Speaker 1 (196. TD Using the Form State)
each control of the form,
0:07
S… Speaker 1 (196. TD Using the Form State)
whether it's valid and so on,
0:09
S… Speaker 1 (196. TD Using the Form State)
and conditionally also adds these CSS classes.
0:12
S… Speaker 1 (196. TD Using the Form State)
Now with that information we can go back to our form
0:17
S… Speaker 1 (196. TD Using the Form State)
and you take advantage of it.
0:19
S… Speaker 1 (196. TD Using the Form State)
Before diving into these CSS classes,
0:21
S… Speaker 1 (196. TD Using the Form State)
the easiest way of taking advantage is down here on the submit button.
0:25
S… Speaker 1 (196. TD Using the Form State)
Let's disable the button if the form is not valid.
0:28
S… Speaker 1 (196. TD Using the Form State)
So I'll just split this over multiple lines and add some property
0:33
S… Speaker 1 (196. TD Using the Form State)
binding.
0:33
S… Speaker 1 (196. TD Using the Form State)
I want to bind to the disabled property,
0:36
S… Speaker 1 (196. TD Using the Form State)
which will add the,
0:37
S… Speaker 1 (196. TD Using the Form State)
or which will set the disabled state of this button to true or false
0:41
S… Speaker 1 (196. TD Using the Form State)
depending on some condition,
0:43
S… Speaker 1 (196. TD Using the Form State)
and I will specify the condition here.
0:45
S… Speaker 1 (196. TD Using the Form State)
Now, I could say true here to always disable it.
0:48
S… Speaker 1 (196. TD Using the Form State)
That, of course,
0:49
S… Speaker 1 (196. TD Using the Form State)
is not super useful.
0:50
S… Speaker 1 (196. TD Using the Form State)
Instead,
0:51
S… Speaker 1 (196. TD Using the Form State)
here I want to check whether the form,
0:53
S… Speaker 1 (196. TD Using the Form State)
remember,
0:54
S… Speaker 1 (196. TD Using the Form State)
we do have access to it on this F local reference here.
0:58
S… Speaker 1 (196. TD Using the Form State)
So if this form is valid,
1:01
S… Speaker 1 (196. TD Using the Form State)
or to be precise,
1:02
S… Speaker 1 (196. TD Using the Form State)
if it is not valid.
1:04
S… Speaker 1 (196. TD Using the Form State)
So if this form is not valid,
1:06
S… Speaker 1 (196. TD Using the Form State)
the button should be disabled.
1:08
S… Speaker 1 (196. TD Using the Form State)
And we can actually see this once this reloads,
1:11
S… Speaker 1 (196. TD Using the Form State)
that now the button is disabled.
1:12
S… Speaker 1 (196. TD Using the Form State)
And only if I enter some valid values here,
1:16
S… Speaker 1 (196. TD Using the Form State)
I can hit the submit button again.
1:19
S… Speaker 1 (196. TD Using the Form State)
So this is the first improvement in place.
1:21
S… Speaker 1 (196. TD Using the Form State)
The second improvement is to take advantage of these CSS
1:25
S… Speaker 1 (196. TD Using the Form State)
classes.
1:27
S… Speaker 1 (196. TD Using the Form State)
We do get these classes added automatically.
1:29
S… Speaker 1 (196. TD Using the Form State)
So we can now go to the style sheet of this app component.
1:33
S… Speaker 1 (196. TD Using the Form State)
And we could say that on ng -invalid,
1:36
S… Speaker 1 (196. TD Using the Form State)
we want to give it a red border.
1:38
S… Speaker 1 (196. TD Using the Form State)
So one pixel solid red.
1:41
S… Speaker 1 (196. TD Using the Form State)
Sounds like a solid idea,
1:42
S… Speaker 1 (196. TD Using the Form State)
doesn't it?
1:43
S… Speaker 1 (196. TD Using the Form State)
Well, if we do this,
1:44
S… Speaker 1 (196. TD Using the Form State)
you see everything is red now.
1:46
S… Speaker 1 (196. TD Using the Form State)
The two controls,
1:47
S… Speaker 1 (196. TD Using the Form State)
but also the overall form.
1:49
S… Speaker 1 (196. TD Using the Form State)
The reason for this is that our overall form is also
1:53
S… Speaker 1 (196. TD Using the Form State)
invalid and that Angular also adds the ngInvalid class,
1:58
S… Speaker 1 (196. TD Using the Form State)
CSS class,
1:59
S… Speaker 1 (196. TD Using the Form State)
to the form element.
2:00
S… Speaker 1 (196. TD Using the Form State)
So a better approach would be to make sure that it is not
2:05
S… Speaker 1 (196. TD Using the Form State)
added to the
2:06
S… Speaker 1 (196. TD Using the Form State)
form now there are a couple of ways to doing this and it's all just pure
2:11
S… Speaker 1 (196. TD Using the Form State)
css logic one idea would be that we want
2:15
S… Speaker 1 (196. TD Using the Form State)
to be inside of the form element but then it would still place these
2:19
S… Speaker 1 (196. TD Using the Form State)
red borders around grouping divs we will have a look at what i mean
2:23
S… Speaker 1 (196. TD Using the Form State)
with this later so the best way is to simply be explicit
2:27
S… Speaker 1 (196. TD Using the Form State)
that we want to add it on inputs for example
2:30
S… Speaker 1 (196. TD Using the Form State)
And of course, you could also add select here.
2:33
S… Speaker 1 (196. TD Using the Form State)
So input with ng -invalid or select with ng
2:37
S… Speaker 1 (196. TD Using the Form State)
-invalid and which other elements you have.
2:39
S… Speaker 1 (196. TD Using the Form State)
Just be creative here.
2:41
S… Speaker 1 (196. TD Using the Form State)
There are different ways of achieving this goal.
2:43
S… Speaker 1 (196. TD Using the Form State)
In the end, you just want to make sure that the border is applied to the right
2:47
S… Speaker 1 (196. TD Using the Form State)
controls.
2:48
S… Speaker 1 (196. TD Using the Form State)
Now with this in place,
2:49
S… Speaker 1 (196. TD Using the Form State)
we see that now we only have a red border around the invalid controls,
2:53
S… Speaker 1 (196. TD Using the Form State)
but we do have the border right from the start,
2:56
S… Speaker 1 (196. TD Using the Form State)
which is also not great because
2:59
S… Speaker 1 (196. TD Using the Form State)
I at least want to give the user the chance of changing it before showing
3:04
S… Speaker 1 (196. TD Using the Form State)
a warning, showing that it's wrong.
3:05
S… Speaker 1 (196. TD Using the Form State)
So a better approach might be to make sure that we only add a red border
3:10
S… Speaker 1 (196. TD Using the Form State)
to an input which has the CSS class ng invalid and
3:14
S… Speaker 1 (196. TD Using the Form State)
also the CSS class ng touched.
3:17
S… Speaker 1 (196. TD Using the Form State)
So that user has to at least click into it.
3:20
S… Speaker 1 (196. TD Using the Form State)
Now by default,
3:21
S… Speaker 1 (196. TD Using the Form State)
we don't see anything red,
3:23
S… Speaker 1 (196. TD Using the Form State)
even though the form is invalid.
3:24
S… Speaker 1 (196. TD Using the Form State)
But if you click in there and decide,
3:27
S… Speaker 1 (196. TD Using the Form State)
yeah, I'm done,
3:27
S… Speaker 1 (196. TD Using the Form State)
this is my value.
3:28
S… Speaker 1 (196. TD Using the Form State)
Well,
3:29
S… Speaker 1 (196. TD Using the Form State)
now you see we have a red border because now we had a chance of changing
3:33
S… Speaker 1 (196. TD Using the Form State)
it. We didn't change it.
3:35
S… Speaker 1 (196. TD Using the Form State)
It is invalid and we want to show this.
3:37
S… Speaker 1 (196. TD Using the Form State)
And with that,
3:38
S… Speaker 1 (196. TD Using the Form State)
we're taking advantage of this form state handled by Angular.
3:42
S… Speaker 1 (196. TD Using the Form State)
We disable the button and we show a visual feedback to
3:46
S… Speaker 1 (196. TD Using the Form State)
the user.
3:47
S… Speaker 1 (196. TD Using the Form State)
now you could of course go much further you could also add a warning
3:51
S… Speaker 1 (196. TD Using the Form State)
message below this input here for example and
3:55
S… Speaker 1 (196. TD Using the Form State)
output please enter a valid value
4:00
S… Speaker 1 (196. TD Using the Form State)
or be more precise than that of course and
4:04
S… Speaker 1 (196. TD Using the Form State)
add
4:05
S… Speaker 1 (196. TD Using the Form State)
ngif to conditionally show this if the input
4:09
S… Speaker 1 (196. TD Using the Form State)
value is wrong.
4:10
S… Speaker 1 (196. TD Using the Form State)
Well,
4:11
S… Speaker 1 (196. TD Using the Form State)
this gives us one additional problem though.
4:13
S… Speaker 1 (196. TD Using the Form State)
How do we determine whether this input here
4:18
S… Speaker 1 (196. TD Using the Form State)
or this control here does hold a wrong value?
4:21
S… Speaker 1 (196. TD Using the Form State)
We'll take a closer look in the next lecture.

Þessi afritun var búin til af AI (sjálfvirk talgreining). Getur innihaldið villur - staðfesta gegn upprunalegu hljóðinu til mikilvægrar notkunar. AI stefna

❤️ Elska STT.ai? Segðu vinum þínum!
Samantekt
Smelltu á Samantekt til að búa til AI samantekt á þessari afritun.
Samantekt...
Spyrja AI um þessa afritun
Spyrðu eitthvað um þetta afritunarrit - AI mun finna viðeigandi hluta og svara.
Umrita annað