194. TD Adding Validation to check User Input

Jul 21, 2026 02:03 · 4:14 · English · Whisper Turbo · 2 Овозли эшиттиришлар

Бу транскрипт муддати тугайди 7 кунлар. Доимий сақлаш учун янгилаш →

Ўқиш индекси

0:02

S… Speaker 1 (194. TD Adding Validation to check User Input)

So as mentioned at the end of the last lecture,

0:04

S… Speaker 1 (194. TD Adding Validation to check User Input)

it would be nice if we could validate the user input,

0:07

S… Speaker 1 (194. TD Adding Validation to check User Input)

something very important in any app you build.

0:10

S… Speaker 1 (194. TD Adding Validation to check User Input)

Whilst you should still validate input on the server,

0:13

S… Speaker 1 (194. TD Adding Validation to check User Input)

as the frontend can always be tricked,

0:16

S… Speaker 1 (194. TD Adding Validation to check User Input)

you can greatly enhance user experience by also validating

0:20

S… Speaker 1 (194. TD Adding Validation to check User Input)

the input here.

0:20

S… Speaker 1 (194. TD Adding Validation to check User Input)

For example,

0:21

S… Speaker 1 (194. TD Adding Validation to check User Input)

we want to make sure that none of the fields here is empty and

0:26

S… Speaker 1 (194. TD Adding Validation to check User Input)

that the email address actually is a valid email address.

0:29

S… Speaker 1 (194. TD Adding Validation to check User Input)

So let's go back to our app component to the HTML file

0:33

S… Speaker 1 (194. TD Adding Validation to check User Input)

to the template.

0:35

S… Speaker 1 (194. TD Adding Validation to check User Input)

and see how we can add such validators.

0:37

S… Speaker 2 (194. TD Adding Validation to check User Input)

Now,

0:38

S… Speaker 1 (194. TD Adding Validation to check User Input)

since we use the template -driven approach,

0:40

S… Speaker 1 (194. TD Adding Validation to check User Input)

we can only add them in the template.

0:43

S… Speaker 1 (194. TD Adding Validation to check User Input)

And here we can,

0:44

S… Speaker 1 (194. TD Adding Validation to check User Input)

for example, add required to our username input.

0:48

S… Speaker 1 (194. TD Adding Validation to check User Input)

Now, required is a default HTML attribute you

0:52

S… Speaker 1 (194. TD Adding Validation to check User Input)

can add to an input.

0:54

S… Speaker 1 (194. TD Adding Validation to check User Input)

Here,

0:55

S… Speaker 1 (194. TD Adding Validation to check User Input)

however, Angular will detect it,

0:57

S… Speaker 1 (194. TD Adding Validation to check User Input)

so it acts as a selector for a built -in directive shipping with Angular.

1:02

S… Speaker 1 (194. TD Adding Validation to check User Input)

And it will automatically configure your form,

1:05

S… Speaker 1 (194. TD Adding Validation to check User Input)

you could say,

1:06

S… Speaker 1 (194. TD Adding Validation to check User Input)

to take this into account to make sure that now this will

1:10

S… Speaker 1 (194. TD Adding Validation to check User Input)

be treated as invalid if,

1:12

S… Speaker 1 (194. TD Adding Validation to check User Input)

well, it is empty.

1:14

S… Speaker 1 (194. TD Adding Validation to check User Input)

And on the email,

1:16

S… Speaker 1 (194. TD Adding Validation to check User Input)

we can,

1:16

S… Speaker 1 (194. TD Adding Validation to check User Input)

for example, therefore also add required.

1:19

S… Speaker 1 (194. TD Adding Validation to check User Input)

And there also is an email.

1:23

S… Speaker 1 (194. TD Adding Validation to check User Input)

Direct if you can add now email is not a bolt in HTML attribute

1:27

S… Speaker 1 (194. TD Adding Validation to check User Input)

It still is a directive and keep in mind required is only treated

1:32

S… Speaker 1 (194. TD Adding Validation to check User Input)

as a selector for an angular directive here an Email is

1:36

S… Speaker 1 (194. TD Adding Validation to check User Input)

simply another directive made available by angular which makes sure

1:40

S… Speaker 1 (194. TD Adding Validation to check User Input)

that this is actually a valid email address So

1:44

S… Speaker 1 (194. TD Adding Validation to check User Input)

now if we save this

1:47

S… Speaker 1 (194. TD Adding Validation to check User Input)

And we have a look at our form here and I submit it.

1:50

S… Speaker 1 (194. TD Adding Validation to check User Input)

I can still submit it because we haven't set up anything which would prevent us from doing

1:54

S… Speaker 1 (194. TD Adding Validation to check User Input)

so.

1:54

S… Speaker 1 (194. TD Adding Validation to check User Input)

But if we have a look at it and check the valid attribute,

1:58

S… Speaker 1 (194. TD Adding Validation to check User Input)

you see it as false.

1:59

S… Speaker 1 (194. TD Adding Validation to check User Input)

And if I enter something here,

2:02

S… Speaker 1 (194. TD Adding Validation to check User Input)

enter something here,

2:04

S… Speaker 1 (194. TD Adding Validation to check User Input)

so it's filled,

2:05

S… Speaker 1 (194. TD Adding Validation to check User Input)

but the email address is still not valid.

2:07

S… Speaker 1 (194. TD Adding Validation to check User Input)

You see that still valid is false.

2:11

S… Speaker 1 (194. TD Adding Validation to check User Input)

Only if I turn this into a valid email address here,

2:14

S… Speaker 1 (194. TD Adding Validation to check User Input)

only in this case.

2:16

S… Speaker 1 (194. TD Adding Validation to check User Input)

Now if we submit it,

2:17

S… Speaker 1 (194. TD Adding Validation to check User Input)

now you see valid is true.

2:19

S… Speaker 1 (194. TD Adding Validation to check User Input)

So now Angular tracks the state of this form and correctly

2:24

S… Speaker 1 (194. TD Adding Validation to check User Input)

informs us or gives us a chance of querying it whether this form

2:28

S… Speaker 1 (194. TD Adding Validation to check User Input)

is valid or not.

2:29

S… Speaker 1 (194. TD Adding Validation to check User Input)

And actually this does not only work on form level.

2:33

S… Speaker 1 (194. TD Adding Validation to check User Input)

If we dive into the actual controls,

2:35

S… Speaker 1 (194. TD Adding Validation to check User Input)

you see that on the email control,

2:37

S… Speaker 1 (194. TD Adding Validation to check User Input)

we also have a valid attribute.

2:41

S… Speaker 1 (194. TD Adding Validation to check User Input)

which is true.

2:42

S… Speaker 1 (194. TD Adding Validation to check User Input)

So it tracks this on a per control level

2:46

S… Speaker 1 (194. TD Adding Validation to check User Input)

and then also on a form level.

2:49

S… Speaker 2 (194. TD Adding Validation to check User Input)

Now,

2:50

S… Speaker 1 (194. TD Adding Validation to check User Input)

there also is another place where it tracks this

2:54

S… Speaker 1 (194. TD Adding Validation to check User Input)

and helps us.

2:55

S… Speaker 1 (194. TD Adding Validation to check User Input)

If we inspect this email element here in

2:59

S… Speaker 1 (194. TD Adding Validation to check User Input)

the HTML code,

3:01

S… Speaker 1 (194. TD Adding Validation to check User Input)

You see that it adds a couple of classes because the form

3:05

S… Speaker 1 (194. TD Adding Validation to check User Input)

control class here is by us.

3:07

S… Speaker 1 (194. TD Adding Validation to check User Input)

It's a bootstrap class to give it some styling.

3:09

S… Speaker 1 (194. TD Adding Validation to check User Input)

But ngDirty,

3:10

S… Speaker 1 (194. TD Adding Validation to check User Input)

ngTouched and ngValid,

3:13

S… Speaker 1 (194. TD Adding Validation to check User Input)

these are not classes added by us.

3:15

S… Speaker 1 (194. TD Adding Validation to check User Input)

And the ng at the beginning makes it pretty clear who is responsible for adding

3:20

S… Speaker 1 (194. TD Adding Validation to check User Input)

these classes.

3:21

S… Speaker 1 (194. TD Adding Validation to check User Input)

Now watch these classes if I remove the

3:25

S… Speaker 1 (194. TD Adding Validation to check User Input)

add sign here.

3:26

S… Speaker 1 (194. TD Adding Validation to check User Input)

You saw that ng -invalid was added and ng

3:30

S… Speaker 1 (194. TD Adding Validation to check User Input)

-valid was removed.

3:32

S… Speaker 1 (194. TD Adding Validation to check User Input)

So Angular dynamically adds some classes,

3:35

S… Speaker 1 (194. TD Adding Validation to check User Input)

giving us information,

3:37

S… Speaker 1 (194. TD Adding Validation to check User Input)

some CSS classes,

3:38

S… Speaker 1 (194. TD Adding Validation to check User Input)

giving us information about the state of the individual control here.

3:42

S… Speaker 1 (194. TD Adding Validation to check User Input)

Whether it is dirty or not,

3:44

S… Speaker 1 (194. TD Adding Validation to check User Input)

so whether we did change the initial value.

3:47

S… Speaker 1 (194. TD Adding Validation to check User Input)

Whether it is touched or not,

3:49

S… Speaker 1 (194. TD Adding Validation to check User Input)

so whether we clicked into it or not.

3:51

S… Speaker 1 (194. TD Adding Validation to check User Input)

And whether it is valid or not.

3:54

S… Speaker 1 (194. TD Adding Validation to check User Input)

Now with that information,

3:55

S… Speaker 1 (194. TD Adding Validation to check User Input)

we can style these inputs conditionally.

3:58

S… Speaker 1 (194. TD Adding Validation to check User Input)

So let's in the next lecture take advantage of the fact that Angular

4:03

S… Speaker 1 (194. TD Adding Validation to check User Input)

tracks the state of the validity and of the form overall and change

4:07

S… Speaker 1 (194. TD Adding Validation to check User Input)

the styling and the behavior the user experience with that form.

Бу транскрипт AI (автомат сўзлашувни таниб олиш) томонидан яратилган. Хатолар бўлиши мумкин - муҳим фойдаланиш учун оригинал аудио билан текширинг. AI сиёсати

❤️ STT.aiни севасанми? Дўстларингга айт!

Тақриз

Ушбу транскриптнинг AI резюмесини яратиш учун "Тафсиллаш" тугмасини босинг.

Бу транскрипт ҳақида AIдан сўранг

Ушбу транскрипт ҳақида бирор нарса сўранг — AI тегишли қисмларни топиб жавоб беради.

Бошқасини кўчириш