223. Adding Validation to the Form

Jul 22, 2026 00:51 · 2:22 · English · Whisper Turbo · 2 സ്പീക്കറുകള്‍

ഈ തീയതിയുടെ കാലാവധി അവസാനിക്കുന്നു 8 ദിനങ്ങള്‍ സ്ഥിരമായുള്ള സ്റ്റോറേജ് അപ്ഗ്രേഡ് ചെയ്യുക →

ലാപ്‌സ് ഇന്‍ഡെക്സ്

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.

ഈ അക്ഷം AI (സ്വയമുണ്ടായി അക്ഷരാനുഗ്രഹം) ഉണ്ടാക്കിയത്. പിശകുകള്‍ ഉള്‍ക്കൊള്ളാം. അല്ലെങ്കില്‍ മൂല ഓഡിയോ ഉപയോഗിക്കുന്നതിനു് മുന്‍കൂട്ടിയുള്ള പിശകുകള്‍ സ്ഥിതീകരിക്കാം. ഐഐ നയം

❤️ സ്നേഹം STT.ai? കൂട്ടുകാരോട് പറയൂ!

സാരാംശം

ഈ അക്ഷരമാലയുടെ AI സമ്മറി ഉണ്ടാക്കാന്‍ കെസ്റ്റെല്‍ ക്ലിക്ക് ചെയ്യുക.

ഈ ട്രാന്‍സ്പെക്റ്റിനെ കുറിച്ച് AI ചോദിയ്ക്കുക

ഈ പുസ്‌തകത്തെക്കുറിച്ച് എന്തെങ്കിലും ചോദിക്കുക — AI - ന്‌ ആവശ്യമായ ഭാഗങ്ങൾ കണ്ടെത്തുകയും ഉത്തരം നൽകുകയും ചെയ്യും.

വീണ്ടും എഴുതുക