236. Validating User Input

Jul 22, 2026 00:52 · 5:10 · English · Whisper Turbo · 2 _Gözleg

Bu transkripiň möhleti geçýär 8 günler Daşyndan gaýd etmek üçin täzele →

Okap Bil

0:02

S… Speaker 1 (236. Validating User Input)

We finished our form in its basic form but time to

0:06

S… Speaker 1 (236. Validating User Input)

add some validation to it.

0:07

S… Speaker 1 (236. Validating User Input)

We do add validation of course in our TypeScript code.

0:11

S… Speaker 1 (236. Validating User Input)

Right now there is no validation attached to any of the controls

0:15

S… Speaker 1 (236. Validating User Input)

and that is not really the behavior I want.

0:17

S… Speaker 1 (236. Validating User Input)

When we initialize the form here at the end

0:21

S… Speaker 1 (236. Validating User Input)

of init form for the name for example

0:25

S… Speaker 1 (236. Validating User Input)

I want to add a built -in validator.

0:28

S… Speaker 1 (236. Validating User Input)

So from the validators package,

0:29

S… Speaker 1 (236. Validating User Input)

which we need to import from addAngularForms.

0:33

S… Speaker 1 (236. Validating User Input)

So from this package,

0:35

S… Speaker 1 (236. Validating User Input)

I want to add the required validator.

0:37

S… Speaker 1 (236. Validating User Input)

Don't execute it.

0:39

S… Speaker 1 (236. Validating User Input)

Don't add parentheses.

0:40

S… Speaker 1 (236. Validating User Input)

You only want to pass a reference to this validator.

0:44

S… Speaker 1 (236. Validating User Input)

So that Angular is able to execute this method at the time it

0:48

S… Speaker 1 (236. Validating User Input)

validates the input.

0:49

S… Speaker 1 (236. Validating User Input)

Now the image path.

0:52

S… Speaker 2 (236. Validating User Input)

That should also be required.

0:54

S… Speaker 2 (236. Validating User Input)

So I'll repeat the procedure here.

0:56

S… Speaker 2 (236. Validating User Input)

Add required,

0:57

S… Speaker 2 (236. Validating User Input)

don't execute it.

0:58

S… Speaker 1 (236. Validating User Input)

And I'll copy it because I also want to require the description.

1:02

S… Speaker 1 (236. Validating User Input)

For the ingredients,

1:05

S… Speaker 1 (236. Validating User Input)

when we create a new ingredient here,

1:07

S… Speaker 1 (236. Validating User Input)

the name should also be required.

1:11

S… Speaker 1 (236. Validating User Input)

And the amount,

1:13

S… Speaker 1 (236. Validating User Input)

here I'm going to add two checks.

1:15

S… Speaker 2 (236. Validating User Input)

The first one is that it's required.

1:18

S… Speaker 1 (236. Validating User Input)

The second element here actually is the pattern validator.

1:23

S… Speaker 1 (236. Validating User Input)

And here we can copy the pattern we used in the shopping edit

1:28

S… Speaker 1 (236. Validating User Input)

component.

1:28

S… Speaker 1 (236. Validating User Input)

This regular expression here,

1:31

S… Speaker 1 (236. Validating User Input)

it's the same expression I want to validate here that we only have positive

1:35

S… Speaker 1 (236. Validating User Input)

numbers.

1:35

S… Speaker 1 (236. Validating User Input)

Here in pattern,

1:37

S… Speaker 1 (236. Validating User Input)

you simply pass a regular expression by

1:41

S… Speaker 1 (236. Validating User Input)

putting two forward slashes and in between your expression.

1:46

S… Speaker 1 (236. Validating User Input)

without any quotation marks here.

1:48

S… Speaker 2 (236. Validating User Input)

So that is the pattern.

1:50

S… Speaker 1 (236. Validating User Input)

And we do execute this method because this acts like the factory.

1:54

S… Speaker 1 (236. Validating User Input)

It gives us back the configured validator then,

1:58

S… Speaker 1 (236. Validating User Input)

which will be used by Angular.

1:59

S… Speaker 1 (236. Validating User Input)

But to configure it,

2:01

S… Speaker 1 (236. Validating User Input)

we need to pass an argument,

2:02

S… Speaker 1 (236. Validating User Input)

right? We need to tell it what should be our pattern.

2:05

S… Speaker 1 (236. Validating User Input)

So that are the validators for a new

2:09

S… Speaker 1 (236. Validating User Input)

form control in the array,

2:11

S… Speaker 1 (236. Validating User Input)

for the new amount control,

2:14

S… Speaker 2 (236. Validating User Input)

I should say.

2:15

S… Speaker 1 (236. Validating User Input)

Let's also copy that to the on add ingredient method where we also

2:19

S… Speaker 1 (236. Validating User Input)

create a new form array form group.

2:22

S… Speaker 1 (236. Validating User Input)

So here I will set the default values to null and

2:26

S… Speaker 1 (236. Validating User Input)

then also add my validators and the same for the name should

2:31

S… Speaker 1 (236. Validating User Input)

have an empty default value and then here just

2:35

S… Speaker 2 (236. Validating User Input)

the required validator.

2:37

S… Speaker 1 (236. Validating User Input)

So now validation should be added to the form successful and

2:42

S… Speaker 1 (236. Validating User Input)

to use it I will disable the save button if

2:46

S… Speaker 1 (236. Validating User Input)

the form is not valid.

2:48

S… Speaker 1 (236. Validating User Input)

So I will bind to disabled and check

2:52

S… Speaker 1 (236. Validating User Input)

if recipe form is not valid.

2:54

S… Speaker 2 (236. Validating User Input)

Well let's see if this reloads

2:59

S… Speaker 2 (236. Validating User Input)

we should see.

3:03

S… Speaker 1 (236. Validating User Input)

that the save button gets disabled,

3:05

S… Speaker 2 (236. Validating User Input)

I would say,

3:06

S… Speaker 2 (236. Validating User Input)

but right,

3:07

S… Speaker 1 (236. Validating User Input)

we got a valid form here.

3:08

S… Speaker 1 (236. Validating User Input)

So let's empty the name and it's disabled,

3:11

S… Speaker 2 (236. Validating User Input)

that looks good.

3:11

S… Speaker 1 (236. Validating User Input)

Let's now empty the description,

3:14

S… Speaker 1 (236. Validating User Input)

disabled,

3:15

S… Speaker 2 (236. Validating User Input)

the URL,

3:16

S… Speaker 1 (236. Validating User Input)

disabled or any control here.

3:20

S… Speaker 1 (236. Validating User Input)

So the name of this ingredient or maybe the

3:24

S… Speaker 1 (236. Validating User Input)

number or a negative number.

3:26

S… Speaker 1 (236. Validating User Input)

So that all seems to work.

3:28

S… Speaker 1 (236. Validating User Input)

The validation state is successfully taken into account.

3:32

S… Speaker 1 (236. Validating User Input)

Now to finish the validation,

3:35

S… Speaker 1 (236. Validating User Input)

I'll go to my CSS sheet and I want to mark

3:39

S… Speaker 1 (236. Validating User Input)

invalid inputs.

3:40

S… Speaker 1 (236. Validating User Input)

Now we get this handy ngInvalid class,

3:44

S… Speaker 1 (236. Validating User Input)

which is added to anything which is invalid.

3:47

S… Speaker 1 (236. Validating User Input)

And that's the problem.

3:48

S… Speaker 1 (236. Validating User Input)

If I add a border of let's say one pixel solid and red,

3:53

S… Speaker 2 (236. Validating User Input)

well,

3:53

S… Speaker 2 (236. Validating User Input)

watch for yourself.

3:55

S… Speaker 1 (236. Validating User Input)

If I remove that,

3:56

S… Speaker 1 (236. Validating User Input)

not only is the name input field invalid,

3:59

S… Speaker 1 (236. Validating User Input)

the whole form is.

4:01

S… Speaker 1 (236. Validating User Input)

So the whole form has this ugly border.

4:03

S… Speaker 1 (236. Validating User Input)

Well,

4:04

S… Speaker 1 (236. Validating User Input)

we can simply change this to assign

4:09

S… Speaker 1 (236. Validating User Input)

ng or assign this class,

4:10

S… Speaker 2 (236. Validating User Input)

this style I should say,

4:12

S… Speaker 1 (236. Validating User Input)

only to elements with have the ng -invalid class,

4:15

S… Speaker 1 (236. Validating User Input)

but which also are an input.

4:20

S… Speaker 1 (236. Validating User Input)

or optionally,

4:21

S… Speaker 1 (236. Validating User Input)

to be very explicit here,

4:23

S… Speaker 1 (236. Validating User Input)

a text area in our case here with ng -invalid.

4:26

S… Speaker 1 (236. Validating User Input)

So with this now,

4:28

S… Speaker 1 (236. Validating User Input)

we should make sure that if I remove this,

4:30

S… Speaker 2 (236. Validating User Input)

only the box itself receives the red border.

4:33

S… Speaker 1 (236. Validating User Input)

To prevent this from having the red border right from the start,

4:37

S… Speaker 1 (236. Validating User Input)

I'll also add ng -touched here as a check or

4:41

S… Speaker 2 (236. Validating User Input)

as a class which has to be present,

4:43

S… Speaker 1 (236. Validating User Input)

so that we at least had to click into that control to mark

4:47

S… Speaker 1 (236. Validating User Input)

it as invalid.

4:49

S… Speaker 1 (236. Validating User Input)

You will see what I mean if I add a new recipe.

4:51

S… Speaker 2 (236. Validating User Input)

Everything is clean.

4:53

S… Speaker 1 (236. Validating User Input)

If I click in here and out of there,

4:55

S… Speaker 1 (236. Validating User Input)

now it has the red border.

4:57

S… Speaker 1 (236. Validating User Input)

So that is validation working as it looks to me.

5:01

S… Speaker 1 (236. Validating User Input)

Now let's make sure that we can actually submit a form and save it

5:05

S… Speaker 2 (236. Validating User Input)

or successfully update it.

Bu transkript AI (otomat söz tanamak) tarapyndan emele getirildi. Hatalar bar bolup biler - örän möhüm ulanmak üçin ahyrky ses bilen deňle. AI düzgüni

❤️ STT.ai-i söýýäňmi? Dostlaryňa aýt

_Dürs

Bu transkripiň AI haýalnamasyny emele etmek üçin Çap et

Bu transkripsiýa hakda AI-den sora

Bu transkripsiýa hakda bir zat soraň — AI degişli bölümleri tapyp jogap berer.

Başgasyny _Çykar