235. Adding new Ingredient Controls

Jul 22, 2026 00:51 · 3:39 · English · Whisper Turbo · 2 غږوونکي

دا ليکنه په 8 ورځې د تلپاتې ذخيرې لپاره لوړول →

د لوستنې لړيال

0:02

S… Speaker 1 (235. Adding new Ingredient Controls)

In the last lecture we added our array.

0:04

S… Speaker 1 (235. Adding new Ingredient Controls)

Now I want to clean up how it looks,

0:08

S… Speaker 1 (235. Adding new Ingredient Controls)

some styling,

0:09

S… Speaker 1 (235. Adding new Ingredient Controls)

but mainly I want to add a button which allows us to

0:13

S… Speaker 1 (235. Adding new Ingredient Controls)

add a new ingredient to that array.

0:16

S… Speaker 2 (235. Adding new Ingredient Controls)

Well,

0:17

S… Speaker 1 (235. Adding new Ingredient Controls)

to work on the styling,

0:18

S… Speaker 1 (235. Adding new Ingredient Controls)

all I really want to do is I want to have some spacing between the rows.

0:22

S… Speaker 1 (235. Adding new Ingredient Controls)

Well, there are a couple of ways of getting this style.

0:27

S… Speaker 1 (235. Adding new Ingredient Controls)

What I will simply do is I will add an inline style,

0:31

S… Speaker 1 (235. Adding new Ingredient Controls)

a normal style,

0:32

S… Speaker 1 (235. Adding new Ingredient Controls)

no angular style,

0:34

S… Speaker 1 (235. Adding new Ingredient Controls)

no ng -style directive.

0:35

S… Speaker 1 (235. Adding new Ingredient Controls)

A normal style where I say margin,

0:38

S… Speaker 1 (235. Adding new Ingredient Controls)

top,

0:40

S… Speaker 1 (235. Adding new Ingredient Controls)

and set this to 10 pixels maybe.

0:42

S… Speaker 1 (235. Adding new Ingredient Controls)

And with that,

0:44

S… Speaker 1 (235. Adding new Ingredient Controls)

it looks much better.

0:45

S… Speaker 1 (235. Adding new Ingredient Controls)

So that's all I wanted to do for now.

0:49

S… Speaker 1 (235. Adding new Ingredient Controls)

The more important part is that we're able to add new ingredients.

0:54

S… Speaker 1 (235. Adding new Ingredient Controls)

And for this,

0:55

S… Speaker 1 (235. Adding new Ingredient Controls)

I'll simply add a new button at the end of this

1:00

S… Speaker 1 (235. Adding new Ingredient Controls)

array area.

1:01

S… Speaker 1 (235. Adding new Ingredient Controls)

So outside of the div,

1:03

S… Speaker 1 (235. Adding new Ingredient Controls)

which is responsible for my individual form groups,

1:07

S… Speaker 1 (235. Adding new Ingredient Controls)

I'll add a new row with a new column inside of it.

1:11

S… Speaker 1 (235. Adding new Ingredient Controls)

And here I will

1:15

S… Speaker 1 (235. Adding new Ingredient Controls)

simply add a button which says add ingredient,

1:18

S… Speaker 1 (235. Adding new Ingredient Controls)

which will be

1:21

S… Speaker 1 (235. Adding new Ingredient Controls)

of type or which will get a class of button,

1:23

S… Speaker 1 (235. Adding new Ingredient Controls)

button success maybe.

1:24

S… Speaker 1 (235. Adding new Ingredient Controls)

So now it sits directly at the bottom.

1:28

S… Speaker 1 (235. Adding new Ingredient Controls)

Maybe let's simply add a horizontal line between rows.

1:32

S… Speaker 1 (235. Adding new Ingredient Controls)

And that looks pretty good.

1:34

S… Speaker 1 (235. Adding new Ingredient Controls)

So now we get this button.

1:36

S… Speaker 1 (235. Adding new Ingredient Controls)

Let's now also hook it up.

1:38

S… Speaker 1 (235. Adding new Ingredient Controls)

I will add a click listener on add ingredient.

1:41

S… Speaker 1 (235. Adding new Ingredient Controls)

And here in this method,

1:44

S… Speaker 1 (235. Adding new Ingredient Controls)

which I'll add to the TypeScript file,

1:46

S… Speaker 1 (235. Adding new Ingredient Controls)

I want to add a new control to this array of form

1:50

S… Speaker 1 (235. Adding new Ingredient Controls)

controls.

1:51

S… Speaker 1 (235. Adding new Ingredient Controls)

Now I can simply do this by accessing

1:56

S… Speaker 1 (235. Adding new Ingredient Controls)

my recipe form.

1:57

S… Speaker 1 (235. Adding new Ingredient Controls)

There I can get my ingredients control

2:01

S… Speaker 1 (235. Adding new Ingredient Controls)

and I know that this will be a form array but Angular

2:06

S… Speaker 1 (235. Adding new Ingredient Controls)

or TypeScript to be precise doesn't know this.

2:09

S… Speaker 1 (235. Adding new Ingredient Controls)

So I will explicitly cast it with this cast.

2:14

S… Speaker 1 (235. Adding new Ingredient Controls)

command here basically by enclosing the type I want to convert it to

2:18

S… Speaker 1 (235. Adding new Ingredient Controls)

between smaller than and greater than signs and

2:22

S… Speaker 1 (235. Adding new Ingredient Controls)

then enclosing this all in parentheses and now the part here between

2:26

S… Speaker 1 (235. Adding new Ingredient Controls)

the parentheses is treated like a form array because I know that

2:31

S… Speaker 1 (235. Adding new Ingredient Controls)

it indeed is one so here I can call push and

2:35

S… Speaker 1 (235. Adding new Ingredient Controls)

I want to push

2:37

S… Speaker 1 (235. Adding new Ingredient Controls)

new form group because remember we don't push a control here we

2:41

S… Speaker 1 (235. Adding new Ingredient Controls)

need two inputs so a group of inputs and there again I

2:45

S… Speaker 1 (235. Adding new Ingredient Controls)

will have a name which is a new form control and I will have

2:49

S… Speaker 1 (235. Adding new Ingredient Controls)

an amount which will be a new form control and

2:54

S… Speaker 1 (235. Adding new Ingredient Controls)

we don't need to provide any initial values because I don't want to have any so

2:58

S… Speaker 1 (235. Adding new Ingredient Controls)

if I save this and we go back to the application

3:02

S… Speaker 1 (235. Adding new Ingredient Controls)

We should indeed see that once this reloads here,

3:04

S… Speaker 1 (235. Adding new Ingredient Controls)

if I click add ingredient,

3:06

S… Speaker 1 (235. Adding new Ingredient Controls)

we add a new line.

3:08

S… Speaker 1 (235. Adding new Ingredient Controls)

However,

3:09

S… Speaker 1 (235. Adding new Ingredient Controls)

I also submit the form with each click as you can see here on the right.

3:13

S… Speaker 1 (235. Adding new Ingredient Controls)

This is quickly fixed by making sure that this button receives

3:18

S… Speaker 1 (235. Adding new Ingredient Controls)

the type button.

3:20

S… Speaker 1 (235. Adding new Ingredient Controls)

And now it shouldn't submit the form anymore.

3:23

S… Speaker 1 (235. Adding new Ingredient Controls)

So now it just adds ingredients.

3:25

S… Speaker 1 (235. Adding new Ingredient Controls)

This is all working.

3:27

S… Speaker 1 (235. Adding new Ingredient Controls)

This is great.

3:28

S… Speaker 1 (235. Adding new Ingredient Controls)

Now before we make this form submitable or we do something up

3:32

S… Speaker 1 (235. Adding new Ingredient Controls)

on submission,

3:33

S… Speaker 1 (235. Adding new Ingredient Controls)

let's make sure that we add some validation to it.

دا نقل د AI لخوا رامینځته شوی و (د خبرو اتومات پیژندنه). ممکن غلطۍ ولري - د مهم کارولو لپاره د اصلي غږ سره سم تایید کړئ. AI پالېسه

❤️ STT.ai مینه؟ خپل ملګرو ته ووایاست!

لنډيز

د دې د نقل د AI لنډیز توليد خلاصه کېکاږئ.

د دې د نقل په اړه AI وپوښتئ

د دې نقل په اړه هرڅه وپوښتئ - AI به اړونده برخې او ځواب ومومي.

بل لېښل