197. TD Outputting Validation Error Messages
Jul 21, 2026 02:07
· 2:23
· English
· Whisper Turbo
· 2 స్పీకర్లు
ఈ పదకోశం కాలముగింపు@ action: button 7 రోజులు.
శాశ్వత నిల్వ కోసం ఉన్నతీకరించు →
చూపుట మాత్రమే
0:02
S…
Speaker 2 (197. TD Outputting Validation Error Messages)
In the last lecture,
0:03
S…
Speaker 2 (197. TD Outputting Validation Error Messages)
we improved the user experience by taking advantage of the form state handled by
0:07
S…
Speaker 1 (197. TD Outputting Validation Error Messages)
Angular.
0:08
S…
Speaker 1 (197. TD Outputting Validation Error Messages)
Now,
0:09
S…
Speaker 2 (197. TD Outputting Validation Error Messages)
let's improve this even more.
0:10
S…
Speaker 2 (197. TD Outputting Validation Error Messages)
And let's say we want to output some help text below this input to
0:14
S…
Speaker 2 (197. TD Outputting Validation Error Messages)
assist if there is an invalid value in there.
0:18
S…
Speaker 2 (197. TD Outputting Validation Error Messages)
Now we can use a bootstrap class here,
0:20
S…
Speaker 2 (197. TD Outputting Validation Error Messages)
help block,
0:22
S…
Speaker 2 (197. TD Outputting Validation Error Messages)
to make sure that this has the appropriate styling.
0:25
S…
Speaker 2 (197. TD Outputting Validation Error Messages)
And then we could say,
0:27
S…
Speaker 2 (197. TD Outputting Validation Error Messages)
please enter a valid email.
0:28
S…
Speaker 2 (197. TD Outputting Validation Error Messages)
We only want to show this if a valid,
0:32
S…
Speaker 1 (197. TD Outputting Validation Error Messages)
excuse me,
0:32
S…
Speaker 2 (197. TD Outputting Validation Error Messages)
if an invalid value has been entered into the control associated with
0:36
S…
Speaker 2 (197. TD Outputting Validation Error Messages)
this input though.
0:37
S…
Speaker 1 (197. TD Outputting Validation Error Messages)
Well,
0:38
S…
Speaker 2 (197. TD Outputting Validation Error Messages)
a quick and easy way of getting access to the control created
0:43
S…
Speaker 2 (197. TD Outputting Validation Error Messages)
by Angular automatically as we added ng -model to the input.
0:47
S…
Speaker 2 (197. TD Outputting Validation Error Messages)
is by adding a local reference to this input
0:51
S…
Speaker 2 (197. TD Outputting Validation Error Messages)
element here,
0:52
S…
Speaker 2 (197. TD Outputting Validation Error Messages)
for example email,
0:53
S…
Speaker 1 (197. TD Outputting Validation Error Messages)
any name you like.
0:55
S…
Speaker 2 (197. TD Outputting Validation Error Messages)
And associating this now not with ngForm as we did for the
0:59
S…
Speaker 1 (197. TD Outputting Validation Error Messages)
overall form,
1:00
S…
Speaker 1 (197. TD Outputting Validation Error Messages)
but with ngModel.
1:02
S…
Speaker 2 (197. TD Outputting Validation Error Messages)
So just like the form directive automatically added
1:06
S…
Speaker 2 (197. TD Outputting Validation Error Messages)
by Angular when it detects a form element,
1:08
S…
Speaker 2 (197. TD Outputting Validation Error Messages)
the ngModel directive here also kind of exposes
1:13
S…
Speaker 2 (197. TD Outputting Validation Error Messages)
some additional information about the control it creates for us
1:17
S…
Speaker 2 (197. TD Outputting Validation Error Messages)
on the overarching form by accessing ngModel.
1:22
S…
Speaker 2 (197. TD Outputting Validation Error Messages)
So with this,
1:23
S…
Speaker 2 (197. TD Outputting Validation Error Messages)
we could simply check or say that we want to attach this
1:27
S…
Speaker 2 (197. TD Outputting Validation Error Messages)
span here if email is not valid.
1:31
S…
Speaker 2 (197. TD Outputting Validation Error Messages)
So add exclamation mark at the beginning.
1:33
S…
Speaker 2 (197. TD Outputting Validation Error Messages)
Now with this,
1:35
S…
Speaker 2 (197. TD Outputting Validation Error Messages)
if this reloads,
1:37
S…
Speaker 2 (197. TD Outputting Validation Error Messages)
you see that help text.
1:39
S…
Speaker 1 (197. TD Outputting Validation Error Messages)
And of course,
1:40
S…
Speaker 2 (197. TD Outputting Validation Error Messages)
you can improve this by also chaining another condition that the email should
1:44
S…
Speaker 2 (197. TD Outputting Validation Error Messages)
have been touched to give the user a chance of changing it.
1:47
S…
Speaker 2 (197. TD Outputting Validation Error Messages)
So now you don't see the warning,
1:49
S…
Speaker 2 (197. TD Outputting Validation Error Messages)
but if you click in there and click out of there and it is invalid,
1:52
S…
Speaker 2 (197. TD Outputting Validation Error Messages)
you see that warning.
1:53
S…
Speaker 2 (197. TD Outputting Validation Error Messages)
And if you now enter valid data,
1:56
S…
Speaker 2 (197. TD Outputting Validation Error Messages)
it disappears.
1:57
S…
Speaker 2 (197. TD Outputting Validation Error Messages)
So this is another way of taking advantage of the state managed
2:01
S…
Speaker 1 (197. TD Outputting Validation Error Messages)
by Angular.
2:02
S…
Speaker 2 (197. TD Outputting Validation Error Messages)
But this also shows you how you can get a quick and easy access to
2:06
S…
Speaker 2 (197. TD Outputting Validation Error Messages)
control edit by Angular.
2:08
S…
Speaker 2 (197. TD Outputting Validation Error Messages)
And with that,
2:09
S…
Speaker 2 (197. TD Outputting Validation Error Messages)
you should have tools to really provide a pleasant user experience,
2:13
S…
Speaker 2 (197. TD Outputting Validation Error Messages)
showing the right errors,
2:15
S…
Speaker 2 (197. TD Outputting Validation Error Messages)
the right warnings and styling the form correctly,
2:18
S…
Speaker 2 (197. TD Outputting Validation Error Messages)
depending on the state of the form.
ఈ అపోహింగ్ను (స్వయంలేని పద గుర్తింపు) సంప్రదాయం (ఆఫ్యుటికల్ ప్రసంగ గుర్తింపు) రూపొందించారు. దోషములు వుండు. ఫార్మేట్ను సంక్లిష్టమైన ఆడియోకు వ్యతిరేకంగా నిర్ధారించండి. AI విధానము
సారాంశం
ఈ పిక్సెస్ యొక్క యాక్సెస్బిలిటి సంగ్రహం ఉద్భవించుటకు కాంక్వెరర్ను నొక్కుము.
పరిగణనలోకి...
ఈ రిపోర్టు గురించి AI ను అడుగుము
ఈ అస్థికల పేటిక గురించి ఏమైనా అడగండి — ఏ.