197. TD Outputting Validation Error Messages

Jul 21, 2026 02:07 · 2:23 · English · Whisper Turbo · 2 发言者

本记录誊本于2008年 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(自动语音识别)生成的,可能包含错误——与用于关键用途的原始音频核对。大赦国际的政策

❤️ 喜欢 STT.ai 吗? 告诉你的朋友!

摘要

点击摘要以生成本记录誊本的 AI 摘要。

询问 AI 有关此分页

询问任何有关这一记录,大赦国际将找到有关章节和答复。

另写一个