222. TD Adding the Shopping List Form

Jul 22, 2026 00:51 · 3:43 · English · Whisper Turbo · 2 Qof-dheer

Qoraalkani wuxuu dhacayaa 8 maalmood. Kordhinta kaydinta joogtada ah →

Liiska Qoraalka

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.

Qoraalkan waxaa abuuray AI (u aqoonsiga hadalka otomaatiga ah). Waxay ku jiri kartaa khaladaad — xaqiijin ka dhanka ah audio asalka ah ee isticmaalka muhiimka ah. Xeerka AI

❤️ Jecel STT.ai? Ka warran saaxiibbadaa!

Qiyaas

Riix Summarize in ay soo saaraan AI faahfaahin ka mid ah qoraalkan.

Su'aal AI Ku saabsan this transcript

Su'aal wax kasta oo ku saabsan qoraalkan - AI ka heli doonaa qaybaha la xiriira iyo jawaab.

Ku dheji mid kale