234. Adding Ingredient Controls to a Form Array

Jul 22, 2026 00:50 · 5:39 · English · Whisper Turbo · 2 Овозли эшиттиришлар

Бу транскрипт муддати тугайди 8 кунлар. Доимий сақлаш учун янгилаш →

Ўқиш индекси

0:01

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

so let's work on our ingredients list the base form is working

0:06

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

but of course we got another control which we haven't added yet this

0:10

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

is this array of ingredients so when we initialize

0:14

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

the form we actually will have one other default value

0:19

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

for the recipe ingredients this will be

0:23

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

a new form array and you

0:27

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

should import form array from at angular forms

0:31

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

This form array is initialized with a default value of

0:35

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

an empty array because we don't have any ingredients by default Now

0:40

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

with this if that is our default,

0:44

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

what do we overwrite it to here in edit mode?

0:46

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

Well there we will simply need to check if

0:50

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

we have any ingredients to begin with because theoretically you could create

0:55

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

a recipe without ingredients So here what

0:59

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

I want to do is

1:00

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

I want to check if my recipe,

1:03

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

which I loaded,

1:04

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

if it does have ingredients.

1:07

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

So if that is defined,

1:12

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

I know I can safely use them.

1:15

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

So in this case,

1:17

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

I want to use all the ingredients.

1:19

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

So I can simply loop through them with a for off loop.

1:23

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

So for a single ingredient of

1:28

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

my ingredients.

1:33

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

I can go through all of them and I can push them onto

1:37

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

my recipe ingredients form array,

1:40

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

which has a push method.

1:41

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

Here,

1:42

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

I don't push the ingredient.

1:44

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

I push a new form group instead because

1:49

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

I do have two controls,

1:50

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

which will control a single ingredient,

1:53

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

the name and the amount.

1:55

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

So these will be grouped in a form group.

1:57

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

And here I will have a name,

2:00

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

which is now a new form control.

2:03

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

with a default value of ingredient name,

2:07

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

and I will have an amount control,

2:10

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

also a new form control,

2:12

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

which has the default value ingredient amount.

2:15

S… Speaker 2 (234. Adding Ingredient Controls to a Form Array)

Whoops,

2:16

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

not name, amount.

2:17

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

So that is a form group I will push onto this

2:21

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

array, because again,

2:23

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

we have two controls here.

2:24

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

Validation will follow later.

2:27

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

And with that,

2:28

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

we get a default value for recipe ingredients if we have a recipe and

2:32

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

if this recipe then has ingredients.

2:34

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

With that,

2:36

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

we can assign the ingredients control down

2:40

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

there.

2:41

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

And it simply is our recipe ingredients,

2:43

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

which already is this new form array here.

2:47

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

So that's looking all right.

2:49

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

Let's see if it works.

2:50

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

And for that,

2:51

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

of course, we need to synchronize our array with our HTML

2:55

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

code.

2:56

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

So in the recipe edit component,

2:58

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

if we scroll down to that section where we want to use the array,

3:01

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

I'll first work on the div,

3:04

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

which wraps the whole section we're going to use.

3:06

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

Here,

3:08

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

I need to add the form array name directive.

3:12

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

This will then be bound to ingredients because ingredients keep

3:16

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

in mind is the name of our form array here So data science

3:20

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

that in this area.

3:21

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

We're going to handle this array of controls Now

3:25

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

each control of course is now going to be our row here So

3:30

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

on this row

3:32

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

I can place the form group name directive referring

3:37

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

to the individual form group name because remember in our array

3:41

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

we will have form groups as each pair

3:45

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

of name and amount control creates a form group.

3:49

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

Now what's the name of the form group though?

3:52

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

We didn't assign it because it's part of the array.

3:55

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

Well,

3:56

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

we learned how to get this name.

3:58

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

We need to add ng4 to this div and

4:03

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

then we can loop through all the ingredients,

4:05

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

through all the controls,

4:07

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

I should say,

4:08

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

in our array.

4:09

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

So I can loop through the ingredient control

4:13

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

of my recipe form and

4:18

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

there...

4:19

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

Get the ingredients control.

4:21

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

Get is a method which gives us access to that.

4:24

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

And here all the controls of this control.

4:26

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

So this gives us access to all the controls.

4:29

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

And the individual control is now saved in the ingredient control property

4:34

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

or variable we can use in a template.

4:36

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

And I can also extract the index of

4:41

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

the current iteration,

4:41

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

which will be the name for my form group.

4:45

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

So with property binding,

4:46

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

I can now bind i here.

4:49

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

This should give me the form group.

4:51

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

Now we also need to populate these inputs.

4:55

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

And there it's very easy because now we're inside the form group.

4:59

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

And there we have names.

5:01

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

We have name and amount.

5:02

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

So here we can again use form control name.

5:05

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

Set this equal to name for the first control.

5:07

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

And form control name equal to amount for the second

5:11

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

one.

5:13

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

Let's see if that works as expected.

5:16

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

Well,

5:16

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

it already looks pretty good to me here.

5:18

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

We got buns and meat.

5:20

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

And if we added the schnitzel,

5:22

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

we got meat and french fries.

5:24

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

So that gets populated correctly.

5:26

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

This is working as intended.

5:28

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

With that, we got our array added.

5:30

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

Now,

5:31

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

of course, we also need to add a way for us to dynamically add new

5:35

S… Speaker 1 (234. Adding Ingredient Controls to a Form Array)

items to that.

Бу транскрипт AI (автомат сўзлашувни таниб олиш) томонидан яратилган. Хатолар бўлиши мумкин - муҳим фойдаланиш учун оригинал аудио билан текширинг. AI сиёсати

❤️ STT.aiни севасанми? Дўстларингга айт!

Тақриз

Ушбу транскриптнинг AI резюмесини яратиш учун "Тафсиллаш" тугмасини босинг.

Бу транскрипт ҳақида AIдан сўранг

Ушбу транскрипт ҳақида бирор нарса сўранг — AI тегишли қисмларни топиб жавоб беради.

Бошқасини кўчириш