223. Adding Validation to the Form

Jul 22, 2026 00:51 · 2:22 · English · Whisper Turbo · 2 Reproduktory

Tento přepis vyprší v 8 dny. Upgrade pro trvalé skladování →

Index přednášek

0:02

S… Speaker 1 (223. Adding Validation to the Form)

In the last lecture,

0:03

S… Speaker 1 (223. Adding Validation to the Form)

we registered our controls and we made our form submittable.

0:07

S… Speaker 1 (223. Adding Validation to the Form)

So that is what we did then.

0:09

S… Speaker 1 (223. Adding Validation to the Form)

We can still use that form.

0:10

S… Speaker 1 (223. Adding Validation to the Form)

Now I want to add validation.

0:12

S… Speaker 1 (223. Adding Validation to the Form)

For example,

0:14

S… Speaker 1 (223. Adding Validation to the Form)

the name should be required.

0:16

S… Speaker 1 (223. Adding Validation to the Form)

This must not be empty.

0:18

S… Speaker 1 (223. Adding Validation to the Form)

And the same for our number.

0:21

S… Speaker 1 (223. Adding Validation to the Form)

Now it should be a number and due to the fact that this input is of

0:25

S… Speaker 1 (223. Adding Validation to the Form)

type number,

0:26

S… Speaker 1 (223. Adding Validation to the Form)

it should already be hard to enter anything else.

0:29

S… Speaker 1 (223. Adding Validation to the Form)

So with this,

0:31

S… Speaker 1 (223. Adding Validation to the Form)

we now added some validation.

0:34

S… Speaker 1 (223. Adding Validation to the Form)

Now to take advantage of this,

0:37

S… Speaker 1 (223. Adding Validation to the Form)

I want to disable the add button if the form is invalid.

0:40

S… Speaker 1 (223. Adding Validation to the Form)

So we'll bind to disabled here.

0:44

S… Speaker 1 (223. Adding Validation to the Form)

And we'll disable it if form is not valid.

0:47

S… Speaker 1 (223. Adding Validation to the Form)

If this is true.

0:48

S… Speaker 1 (223. Adding Validation to the Form)

So if this check here is true and this will be true if the form is not valid.

0:52

S… Speaker 1 (223. Adding Validation to the Form)

So let's save this.

0:54

S… Speaker 1 (223. Adding Validation to the Form)

And this looks good.

0:55

S… Speaker 1 (223. Adding Validation to the Form)

I can't click the add button.

0:57

S… Speaker 1 (223. Adding Validation to the Form)

Now let's try again.

0:58

S… Speaker 1 (223. Adding Validation to the Form)

Let's insert something into amount.

1:00

S… Speaker 1 (223. Adding Validation to the Form)

This works.

1:01

S… Speaker 2 (223. Adding Validation to the Form)

Of course,

1:02

S… Speaker 1 (223. Adding Validation to the Form)

a negative amount works too though.

1:04

S… Speaker 1 (223. Adding Validation to the Form)

So an easy way of making sure that we may only enter

1:08

S… Speaker 1 (223. Adding Validation to the Form)

numbers greater than zero is to use another built -in validator,

1:13

S… Speaker 1 (223. Adding Validation to the Form)

the pattern validator.

1:14

S… Speaker 1 (223. Adding Validation to the Form)

This will check the user input against a regular expression.

1:19

S… Speaker 1 (223. Adding Validation to the Form)

Now, the regular expression achieving what we're looking for would be the

1:23

S… Speaker 1 (223. Adding Validation to the Form)

following one,

1:24

S… Speaker 1 (223. Adding Validation to the Form)

which needs to be pasted between single quotation marks,

1:27

S… Speaker 1 (223. Adding Validation to the Form)

so as a string,

1:28

S… Speaker 1 (223. Adding Validation to the Form)

it's this one.

1:30

S… Speaker 1 (223. Adding Validation to the Form)

Since it's a string we can also omit these single quotation marks and

1:34

S… Speaker 1 (223. Adding Validation to the Form)

omit the squared brackets to use the shortcut of using property binding

1:38

S… Speaker 1 (223. Adding Validation to the Form)

when binding to a string where we don't have to use the squared brackets So

1:42

S… Speaker 1 (223. Adding Validation to the Form)

what this will basically do this regular expression it will allow any number

1:47

S… Speaker 1 (223. Adding Validation to the Form)

greater than zero So we can see this in action if we now save this

1:51

S… Speaker 1 (223. Adding Validation to the Form)

and go back to the application if I add bread

1:55

S… Speaker 1 (223. Adding Validation to the Form)

And 1,

1:56

S… Speaker 1 (223. Adding Validation to the Form)

this is valid,

1:57

S… Speaker 1 (223. Adding Validation to the Form)

minus 1 doesn't work,

1:59

S… Speaker 1 (223. Adding Validation to the Form)

minus 10 doesn't work,

2:00

S… Speaker 1 (223. Adding Validation to the Form)

minus 0,

2:01

S… Speaker 1 (223. Adding Validation to the Form)

1 doesn't work,

2:01

S… Speaker 2 (223. Adding Validation to the Form)

plus 0,

2:02

S… Speaker 1 (223. Adding Validation to the Form)

1 doesn't work,

2:03

S… Speaker 1 (223. Adding Validation to the Form)

10 does work,

2:04

S… Speaker 1 (223. Adding Validation to the Form)

and 0 does also not work.

2:06

S… Speaker 1 (223. Adding Validation to the Form)

So it does exactly what I wanted to do.

2:08

S… Speaker 1 (223. Adding Validation to the Form)

So now we added validation to this input field.

2:12

S… Speaker 1 (223. Adding Validation to the Form)

Now let's make sure that once we click one of the existing items,

2:16

S… Speaker 1 (223. Adding Validation to the Form)

we actually load that item so that we can edit it.

Tento přepis byl vytvořen AI (automatické rozpoznávání řeči). Může obsahovat chyby?? ověřit proti původnímu zvuku pro kritické použití. Politika AI

❤️ Máte rádi STT.ai? Řekněte to přátelům!

Shrnutí

Klikněte na Summarise pro generování AI shrnutí tohoto přepisu.

Zeptejte se UI na tento transcript

Zeptejte se na cokoliv o tomto přepisu, najdete příslušné sekce a odpověď.

Přepsat další