222. TD Adding the Shopping List Form

Jul 22, 2026 00:51 · 3:43 · English · Whisper Turbo · 2 ተናጋሪ

ይህ ትራንስክሪፕት በ 8 ቀናት ለዘለቄታው ማስቀመጫ ማሻሻል →

የጽሑፍ መደርደሪያ

0:02

S… Speaker 2 (222. TD Adding the Shopping List Form)

So let's start working on that shopping list form.

0:04

S… Speaker 2 (222. TD Adding the Shopping List Form)

As mentioned,

0:05

S… Speaker 2 (222. TD Adding the Shopping List Form)

I want to use the template -driven approach.

0:07

S… Speaker 2 (222. TD Adding the Shopping List Form)

So in the shopping list added component here,

0:11

S… Speaker 2 (222. TD Adding the Shopping List Form)

we already got our form element up here.

0:13

S… Speaker 2 (222. TD Adding the Shopping List Form)

Now Angular will already take control over this and

0:18

S… Speaker 2 (222. TD Adding the Shopping List Form)

already got the forms module added in app module by default.

0:22

S… Speaker 2 (222. TD Adding the Shopping List Form)

We of course will need this too.

0:25

S… Speaker 2 (222. TD Adding the Shopping List Form)

So with the form here,

0:28

S… Speaker 2 (222. TD Adding the Shopping List Form)

we now can start working on our form

0:32

S… Speaker 2 (222. TD Adding the Shopping List Form)

controls.

0:32

S… Speaker 2 (222. TD Adding the Shopping List Form)

I will get rid of these local references.

0:36

S… Speaker 2 (222. TD Adding the Shopping List Form)

I will no longer use that approach.

0:38

S… Speaker 2 (222. TD Adding the Shopping List Form)

I will also get rid of the click listener on the add button.

0:42

S… Speaker 2 (222. TD Adding the Shopping List Form)

Instead,

0:43

S… Speaker 2 (222. TD Adding the Shopping List Form)

I want to use ng -submit to submit the form and

0:48

S… Speaker 2 (222. TD Adding the Shopping List Form)

then call on add item here.

0:50

S… Speaker 2 (222. TD Adding the Shopping List Form)

I also will get access to the form created by Angular.

0:54

S… Speaker 1 (222. TD Adding the Shopping List Form)

And as you learned,

0:55

S… Speaker 2 (222. TD Adding the Shopping List Form)

we can get access by placing a local reference on the form element.

0:59

S… Speaker 2 (222. TD Adding the Shopping List Form)

And now this would give us access to the form element itself.

1:03

S… Speaker 2 (222. TD Adding the Shopping List Form)

But by setting this equal to ngForm,

1:06

S… Speaker 2 (222. TD Adding the Shopping List Form)

we get access to this JavaScript object Angular created

1:10

S… Speaker 2 (222. TD Adding the Shopping List Form)

behind the scenes.

1:11

S… Speaker 2 (222. TD Adding the Shopping List Form)

And now we can simply pass this object to this onAtItem

1:16

S… Speaker 1 (222. TD Adding the Shopping List Form)

method.

1:17

S… Speaker 2 (222. TD Adding the Shopping List Form)

So that is how we can submit the form,

1:19

S… Speaker 2 (222. TD Adding the Shopping List Form)

but we also should register some controls.

1:22

S… Speaker 2 (222. TD Adding the Shopping List Form)

We got a couple of controls here.

1:24

S… Speaker 2 (222. TD Adding the Shopping List Form)

Let's start with the first one.

1:26

S… Speaker 2 (222. TD Adding the Shopping List Form)

Here on the name control,

1:28

S… Speaker 2 (222. TD Adding the Shopping List Form)

I will assign a name,

1:30

S… Speaker 2 (222. TD Adding the Shopping List Form)

so the name attribute of name.

1:33

S… Speaker 2 (222. TD Adding the Shopping List Form)

So a lot of names here,

1:34

S… Speaker 2 (222. TD Adding the Shopping List Form)

but of course the name between the quotation marks is the name of

1:38

S… Speaker 2 (222. TD Adding the Shopping List Form)

the property we'll later have in this form object angular

1:42

S… Speaker 1 (222. TD Adding the Shopping List Form)

created.

1:44

S… Speaker 2 (222. TD Adding the Shopping List Form)

And I will assign ng model to this input so

1:48

S… Speaker 2 (222. TD Adding the Shopping List Form)

that we register it as a control in our template driven form.

1:52

S… Speaker 2 (222. TD Adding the Shopping List Form)

Now for the second input,

1:56

S… Speaker 2 (222. TD Adding the Shopping List Form)

the name will be amount.

1:59

S… Speaker 2 (222. TD Adding the Shopping List Form)

Then I'll also add ng -model and make sure that you import it from

2:03

S… Speaker 2 (222. TD Adding the Shopping List Form)

forms module.

2:04

S… Speaker 2 (222. TD Adding the Shopping List Form)

Otherwise, this is not available So we should have this control

2:08

S… Speaker 2 (222. TD Adding the Shopping List Form)

added to our form too and the add button here will submit

2:12

S… Speaker 2 (222. TD Adding the Shopping List Form)

the form because it's the only button of type submit the other two buttons

2:16

S… Speaker 2 (222. TD Adding the Shopping List Form)

are of type button So in on add item

2:21

S… Speaker 2 (222. TD Adding the Shopping List Form)

in this TypeScript file now

2:23

S… Speaker 2 (222. TD Adding the Shopping List Form)

I no longer will use my element refs here.

2:26

S… Speaker 2 (222. TD Adding the Shopping List Form)

So I can remove these declarations here.

2:30

S… Speaker 2 (222. TD Adding the Shopping List Form)

I can get rid of the view child and element ref import,

2:33

S… Speaker 2 (222. TD Adding the Shopping List Form)

and I can get rid of these two lines where I extract the data.

2:36

S… Speaker 2 (222. TD Adding the Shopping List Form)

I still want to create a new ingredient,

2:39

S… Speaker 2 (222. TD Adding the Shopping List Form)

but now we will simply get the form here and it will be of

2:43

S… Speaker 2 (222. TD Adding the Shopping List Form)

ngForm,

2:44

S… Speaker 2 (222. TD Adding the Shopping List Form)

so of this type.

2:45

S… Speaker 2 (222. TD Adding the Shopping List Form)

Since this is the form,

2:47

S… Speaker 2 (222. TD Adding the Shopping List Form)

we will get the value of the form on the value

2:51

S… Speaker 1 (222. TD Adding the Shopping List Form)

property.

2:53

S… Speaker 2 (222. TD Adding the Shopping List Form)

Now we can simply use the value and access

2:58

S… Speaker 2 (222. TD Adding the Shopping List Form)

name to get the name of the ingredient and Value

3:02

S… Speaker 2 (222. TD Adding the Shopping List Form)

amount to get the amount because name and amount word

3:06

S… Speaker 2 (222. TD Adding the Shopping List Form)

names we specified here in our template on these input elements

3:10

S… Speaker 1 (222. TD Adding the Shopping List Form)

Well,

3:11

S… Speaker 2 (222. TD Adding the Shopping List Form)

let's see if this works if I save this and we

3:15

S… Speaker 2 (222. TD Adding the Shopping List Form)

go back to the shopping list Angie's turf is still running Here

3:20

S… Speaker 2 (222. TD Adding the Shopping List Form)

if I add bread one

3:23

S… Speaker 1 (222. TD Adding the Shopping List Form)

That looks good.

3:24

S… Speaker 2 (222. TD Adding the Shopping List Form)

Works like before,

3:26

S… Speaker 2 (222. TD Adding the Shopping List Form)

but now using the better approach of using the built -in

3:30

S… Speaker 2 (222. TD Adding the Shopping List Form)

tools and therefore building a better form.

3:33

S… Speaker 2 (222. TD Adding the Shopping List Form)

Now we can also take advantage of validation and so on,

3:37

S… Speaker 2 (222. TD Adding the Shopping List Form)

and that is something I will do in the next lecture.

ይህ ትርክት በ AI (አቶማቲክ የንግግር ማወቅ) የተፈጠረ ነው. ስህተቶች ሊኖሩ ይችላሉ - ለጥብቅ ጥቅም በመጀመሪያው ድምፅ ላይ ይመልከቱ የAI ፖሊሲ

❤️ STT.aiን ወዳጅነት? ጓደኞችዎን ንገሩ!

ማጠቃለያ

የዚህን ትራንስክሪፕት AI ማጠቃለያ ለማምጣት ማጠቃለያ ላይ ጠቅ ያድርጉ

ስለዚህ ትራንስክሪፕት AI ጠይቅ

ስለዚህ ጽሑፍ ማንኛውንም ነገር ጠይቁ - AI የሚመለከታቸውን ክፍሎች ያገኛል እናም መልስ ይሰጣል.

ሌላን ላክ