234. Adding Ingredient Controls to a Form Array

Jul 22, 2026 00:51 · 5:39 · English · Whisper Turbo · 2 Konekte
Transkript sa a ekspire nan 8 jou. Ajoutè pou depo perpétuel →
Endèks lekti
Montre sèlman
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.

Transkript sa a te kreye pa AI (automatic speech recognition). Li ka gen erè — tcheke ak son orijinal la pou itilize kritik. Politik AI

❤️ Love STT.ai? Di zanmi ou yo!
Resume
Klike sou Remak pou kreye yon remak AI de transkript sa a.
Enstale...
Konbyen tan pou m' fè transkript la?
Mande nenpòt bagay sou transkript sa a - AI a pral jwenn seksyon ki enpòtan yo epi reponn.
Transkripte yon lòt