197. TD Outputting Validation Error Messages

Jul 21, 2026 02:07 · 2:23 · English · Whisper Turbo · 2 Garsiakalbiai

Šis stenogramos galiojimo laikas baigiasi 7 dienos. Atnaujinti, kad būtų užtikrintas nuolatinis saugojimas →

Lekcijų indeksas

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.

Šis transkriptas buvo sukurtas AI (automatinis kalbos atpažinimas). Gali būti klaidų — patikrinti pagal originalų garso kritinį naudojimą. PG politika

❤️ Patinka STT.ai? Pasakyk draugams!

Santrauka

Spustelėkite Sumarizuokite, kad sukurtumėte šio stenogramos AIS santrauką.

Klausti AI apie šį transkriptą

Paklauskite apie šį stenogramą: AI ras atitinkamus skyrius ir atsakys.

Perrašyti kitą