197. TD Outputting Validation Error Messages
Jul 21, 2026 02:07
· 2:23
· English
· Whisper Turbo
· 2 اسپیکر
یہ نقل ختم ہو جاتا ہے 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 پالیسي
خلاصہ
اس نقل کا AI خلاصہ پیدا کرنے کے لئے خلاصہ کرو کلک کریں.
خلاصہ...
اس نقل کے بارے ميں AI سے پوچھو
اس نقل کے بارے میں کچھ پوچھو - AI متعلقہ حصوں کو تلاش کرے گا اور جواب دے گا۔