237. Submitting the Recipe Edit Form

Jul 22, 2026 00:53 · 7:30 · English · Whisper Turbo · 2 స్పీకర్లు

ఈ పదకోశం కాలముగింపు@ action: button 8 రోజులు. శాశ్వత నిల్వ కోసం ఉన్నతీకరించు →

లాగ్మెట్ సూచికComment

0:02

S… Speaker 1 (237. Submitting the Recipe Edit Form)

With validation added,

0:03

S… Speaker 1 (237. Submitting the Recipe Edit Form)

let's make sure we can update or save our recipe.

0:06

S… Speaker 1 (237. Submitting the Recipe Edit Form)

So in the recipe added component,

0:09

S… Speaker 2 (237. Submitting the Recipe Edit Form)

in onSubmit,

0:10

S… Speaker 1 (237. Submitting the Recipe Edit Form)

I don't want to print the form.

0:12

S… Speaker 1 (237. Submitting the Recipe Edit Form)

I want to do something with it.

0:14

S… Speaker 1 (237. Submitting the Recipe Edit Form)

I want to save it in my array of recipes or update an existing one.

0:18

S… Speaker 1 (237. Submitting the Recipe Edit Form)

So for this,

0:21

S… Speaker 1 (237. Submitting the Recipe Edit Form)

I will need to change my recipe service.

0:23

S… Speaker 2 (237. Submitting the Recipe Edit Form)

Right now,

0:25

S… Speaker 1 (237. Submitting the Recipe Edit Form)

it has no method which allows me to add or update recipes.

0:28

S… Speaker 1 (237. Submitting the Recipe Edit Form)

So I'll add it.

0:30

S… Speaker 1 (237. Submitting the Recipe Edit Form)

Add recipe is a method I will need.

0:33

S… Speaker 1 (237. Submitting the Recipe Edit Form)

And here I expect to get a recipe of type recipe or

0:39

S… Speaker 1 (237. Submitting the Recipe Edit Form)

update recipe.

0:41

S… Speaker 1 (237. Submitting the Recipe Edit Form)

Here I expect to get the index of the recipe I should update

0:45

S… Speaker 1 (237. Submitting the Recipe Edit Form)

and then the new recipe,

0:47

S… Speaker 1 (237. Submitting the Recipe Edit Form)

also of type recipe.

0:49

S… Speaker 1 (237. Submitting the Recipe Edit Form)

In the add recipe case,

0:53

S… Speaker 1 (237. Submitting the Recipe Edit Form)

I will simply take my recipes array and

0:57

S… Speaker 1 (237. Submitting the Recipe Edit Form)

push a new item on it,

0:59

S… Speaker 1 (237. Submitting the Recipe Edit Form)

this new recipe.

1:01

S… Speaker 1 (237. Submitting the Recipe Edit Form)

And in the update recipe case,

1:03

S… Speaker 2 (237. Submitting the Recipe Edit Form)

well,

1:03

S… Speaker 1 (237. Submitting the Recipe Edit Form)

I will take my recipes array,

1:05

S… Speaker 1 (237. Submitting the Recipe Edit Form)

take the element at the index I got here as

1:09

S… Speaker 1 (237. Submitting the Recipe Edit Form)

an argument and set it equal to the new recipe.

1:12

S… Speaker 1 (237. Submitting the Recipe Edit Form)

That is the logic in the service for

1:16

S… Speaker 1 (237. Submitting the Recipe Edit Form)

now.

1:16

S… Speaker 1 (237. Submitting the Recipe Edit Form)

In the recipe component,

1:18

S… Speaker 1 (237. Submitting the Recipe Edit Form)

recipe edit component,

1:20

S… Speaker 1 (237. Submitting the Recipe Edit Form)

excuse me,

1:20

S… Speaker 1 (237. Submitting the Recipe Edit Form)

we already inject this service.

1:23

S… Speaker 2 (237. Submitting the Recipe Edit Form)

So in on submit,

1:24

S… Speaker 1 (237. Submitting the Recipe Edit Form)

I now check if we are in edit mode.

1:28

S… Speaker 1 (237. Submitting the Recipe Edit Form)

If we are,

1:29

S… Speaker 1 (237. Submitting the Recipe Edit Form)

then on my service,

1:31

S… Speaker 1 (237. Submitting the Recipe Edit Form)

I of course want to call the updateRecipe method because I'm

1:35

S… Speaker 1 (237. Submitting the Recipe Edit Form)

interested in,

1:36

S… Speaker 1 (237. Submitting the Recipe Edit Form)

guess what,

1:37

S… Speaker 1 (237. Submitting the Recipe Edit Form)

updating it.

1:38

S… Speaker 1 (237. Submitting the Recipe Edit Form)

I don't want to create a new one because we're in edit mode.

1:40

S… Speaker 1 (237. Submitting the Recipe Edit Form)

So here I will pass the ID of the recipe we're working on

1:44

S… Speaker 1 (237. Submitting the Recipe Edit Form)

and then the new recipe.

1:46

S… Speaker 1 (237. Submitting the Recipe Edit Form)

Let's create this new recipe outside of this if check.

1:50

S… Speaker 1 (237. Submitting the Recipe Edit Form)

The new recipe simply is a new recipe.

1:54

S… Speaker 1 (237. Submitting the Recipe Edit Form)

Using our recipe model,

1:56

S… Speaker 1 (237. Submitting the Recipe Edit Form)

which you therefore have to import at the top.

1:59

S… Speaker 1 (237. Submitting the Recipe Edit Form)

And with that imported,

2:02

S… Speaker 1 (237. Submitting the Recipe Edit Form)

let's configure it.

2:03

S… Speaker 1 (237. Submitting the Recipe Edit Form)

We actually have to pass all the data this

2:08

S… Speaker 1 (237. Submitting the Recipe Edit Form)

constructor expects.

2:09

S… Speaker 1 (237. Submitting the Recipe Edit Form)

So we can access this on our recipe form.

2:12

S… Speaker 1 (237. Submitting the Recipe Edit Form)

Here on the value,

2:14

S… Speaker 1 (237. Submitting the Recipe Edit Form)

we know we will have a name.

2:16

S… Speaker 1 (237. Submitting the Recipe Edit Form)

We also know that here on the recipe form

2:20

S… Speaker 1 (237. Submitting the Recipe Edit Form)

on the value,

2:21

S… Speaker 1 (237. Submitting the Recipe Edit Form)

we will have the description.

2:25

S… Speaker 2 (237. Submitting the Recipe Edit Form)

Now that's getting long,

2:26

S… Speaker 1 (237. Submitting the Recipe Edit Form)

so I'll put this over multiple lines here.

2:28

S… Speaker 1 (237. Submitting the Recipe Edit Form)

The next argument we expect is the image path.

2:32

S… Speaker 1 (237. Submitting the Recipe Edit Form)

And guess what?

2:33

S… Speaker 1 (237. Submitting the Recipe Edit Form)

We know that our value will have that image path because we

2:37

S… Speaker 1 (237. Submitting the Recipe Edit Form)

configured this form and it's controlled.

2:40

S… Speaker 1 (237. Submitting the Recipe Edit Form)

So we know that all these values will be present once it is submitted.

2:43

S… Speaker 1 (237. Submitting the Recipe Edit Form)

Also because we added validation to prevent,

2:47

S… Speaker 2 (237. Submitting the Recipe Edit Form)

well,

2:48

S… Speaker 1 (237. Submitting the Recipe Edit Form)

the submission of values which are not valid.

2:51

S… Speaker 1 (237. Submitting the Recipe Edit Form)

And here the same for the array.

2:54

S… Speaker 1 (237. Submitting the Recipe Edit Form)

We can simply use our recipe for the value,

2:57

S… Speaker 2 (237. Submitting the Recipe Edit Form)

whoops,

2:58

S… Speaker 1 (237. Submitting the Recipe Edit Form)

which is stored in our array

3:03

S… Speaker 2 (237. Submitting the Recipe Edit Form)

ingredients.

3:03

S… Speaker 1 (237. Submitting the Recipe Edit Form)

Let's see if that is in the format we require it to be.

3:07

S… Speaker 2 (237. Submitting the Recipe Edit Form)

So with that,

3:09

S… Speaker 1 (237. Submitting the Recipe Edit Form)

we get our new recipe.

3:10

S… Speaker 1 (237. Submitting the Recipe Edit Form)

Now we can simply

3:14

S… Speaker 1 (237. Submitting the Recipe Edit Form)

pass this new recipe here as an argument to update recipe or

3:18

S… Speaker 1 (237. Submitting the Recipe Edit Form)

if we are not in edit mode,

3:20

S… Speaker 1 (237. Submitting the Recipe Edit Form)

we will call the recipe service,

3:22

S… Speaker 1 (237. Submitting the Recipe Edit Form)

the addRecipe method and pass our new recipe here.

3:27

S… Speaker 1 (237. Submitting the Recipe Edit Form)

As a side note,

3:28

S… Speaker 1 (237. Submitting the Recipe Edit Form)

since our value of the form has exactly

3:32

S… Speaker 1 (237. Submitting the Recipe Edit Form)

the format of our recipe model and the same names

3:36

S… Speaker 1 (237. Submitting the Recipe Edit Form)

like image path and so on,

3:38

S… Speaker 1 (237. Submitting the Recipe Edit Form)

and this is something we especially,

3:40

S… Speaker 2 (237. Submitting the Recipe Edit Form)

well,

3:41

S… Speaker 1 (237. Submitting the Recipe Edit Form)

wanted to make sure and we focused on,

3:43

S… Speaker 1 (237. Submitting the Recipe Edit Form)

you can skip this step of saving it in a

3:48

S… Speaker 1 (237. Submitting the Recipe Edit Form)

new constant.

3:49

S… Speaker 1 (237. Submitting the Recipe Edit Form)

and just pass this recipe form value because

3:53

S… Speaker 1 (237. Submitting the Recipe Edit Form)

the object stored here should have a valid format to

3:57

S… Speaker 1 (237. Submitting the Recipe Edit Form)

fit one of our recipes.

3:59

S… Speaker 1 (237. Submitting the Recipe Edit Form)

So that is a fine way of then taking really advantage

4:03

S… Speaker 1 (237. Submitting the Recipe Edit Form)

of the reactive approach we're using here.

4:06

S… Speaker 2 (237. Submitting the Recipe Edit Form)

With that,

4:07

S… Speaker 1 (237. Submitting the Recipe Edit Form)

we're saving the data.

4:09

S… Speaker 1 (237. Submitting the Recipe Edit Form)

Now let's see if that actually gets added to our

4:13

S… Speaker 1 (237. Submitting the Recipe Edit Form)

list of recipes.

4:14

S… Speaker 1 (237. Submitting the Recipe Edit Form)

If we type two here,

4:19

S… Speaker 1 (237. Submitting the Recipe Edit Form)

Well, I don't know didn't change here if I type something

4:23

S… Speaker 1 (237. Submitting the Recipe Edit Form)

here and I click save I Don't see it,

4:26

S… Speaker 1 (237. Submitting the Recipe Edit Form)

but we also don't get an error Now let's check do we submit it.

4:31

S… Speaker 1 (237. Submitting the Recipe Edit Form)

Yes, we do and this button is of type submit.

4:33

S… Speaker 2 (237. Submitting the Recipe Edit Form)

What's wrong?

4:34

S… Speaker 1 (237. Submitting the Recipe Edit Form)

Do you figure it out?

4:35

S… Speaker 1 (237. Submitting the Recipe Edit Form)

We had this problem earlier in this course

4:41

S… Speaker 1 (237. Submitting the Recipe Edit Form)

It has something to do with our recipe service.

4:43

S… Speaker 1 (237. Submitting the Recipe Edit Form)

We add and update recipes,

4:45

S… Speaker 1 (237. Submitting the Recipe Edit Form)

but when we get a list of recipes,

4:48

S… Speaker 1 (237. Submitting the Recipe Edit Form)

we return a copy here with the slice method.

4:52

S… Speaker 2 (237. Submitting the Recipe Edit Form)

Therefore,

4:53

S… Speaker 1 (237. Submitting the Recipe Edit Form)

this is not the same array we're using in our component

4:57

S… Speaker 1 (237. Submitting the Recipe Edit Form)

as the one we're storing in this recipe service.

5:00

S… Speaker 1 (237. Submitting the Recipe Edit Form)

So the one we're updating is not reflected in the components.

5:04

S… Speaker 1 (237. Submitting the Recipe Edit Form)

We can simply use the same approach as in the shopping list

5:08

S… Speaker 1 (237. Submitting the Recipe Edit Form)

service.

5:09

S… Speaker 1 (237. Submitting the Recipe Edit Form)

I'll have my recipes changed event here,

5:12

S… Speaker 1 (237. Submitting the Recipe Edit Form)

which is a new subject.

5:15

S… Speaker 1 (237. Submitting the Recipe Edit Form)

And subject is imported from RxJS

5:20

S… Speaker 2 (237. Submitting the Recipe Edit Form)

subject.

5:20

S… Speaker 1 (237. Submitting the Recipe Edit Form)

Make sure to add this import.

5:22

S… Speaker 1 (237. Submitting the Recipe Edit Form)

This will then pass an array of recipes as

5:26

S… Speaker 1 (237. Submitting the Recipe Edit Form)

a value.

5:27

S… Speaker 1 (237. Submitting the Recipe Edit Form)

And now here when we call add recipe,

5:31

S… Speaker 1 (237. Submitting the Recipe Edit Form)

I simply use this recipes changed.

5:36

S… Speaker 1 (237. Submitting the Recipe Edit Form)

event here so to say and emit a new value this new value is

5:41

S… Speaker 1 (237. Submitting the Recipe Edit Form)

a new copy of my recipes so that's the same approach as we used

5:45

S… Speaker 1 (237. Submitting the Recipe Edit Form)

in the shopping list service the same of course here when we update a

5:49

S… Speaker 1 (237. Submitting the Recipe Edit Form)

recipe and as i mentioned earlier in the shopping list service you could refactor

5:54

S… Speaker 1 (237. Submitting the Recipe Edit Form)

this into its own method so with this added now we

5:58

S… Speaker 1 (237. Submitting the Recipe Edit Form)

can go to our recipe list component

6:01

S… Speaker 1 (237. Submitting the Recipe Edit Form)

which is in the end where we get our recipes and an ng on

6:05

S… Speaker 1 (237. Submitting the Recipe Edit Form)

init i now want to listen to this event so on the recipe service

6:10

S… Speaker 1 (237. Submitting the Recipe Edit Form)

on recipes changed i will subscribe to that event and

6:14

S… Speaker 1 (237. Submitting the Recipe Edit Form)

if it did change i know that i will receive a new array of recipes that

6:19

S… Speaker 1 (237. Submitting the Recipe Edit Form)

is the data we will get in this call back then and then inside

6:23

S… Speaker 1 (237. Submitting the Recipe Edit Form)

here

6:24

S… Speaker 1 (237. Submitting the Recipe Edit Form)

Now I want to get my updated recipes or

6:28

S… Speaker 1 (237. Submitting the Recipe Edit Form)

simply set the recipes equal to the recipes I got passed here,

6:32

S… Speaker 1 (237. Submitting the Recipe Edit Form)

I should say.

6:32

S… Speaker 1 (237. Submitting the Recipe Edit Form)

That's an approach comparable or pretty similar to the one we used

6:36

S… Speaker 1 (237. Submitting the Recipe Edit Form)

in the shopping list service.

6:38

S… Speaker 1 (237. Submitting the Recipe Edit Form)

So let's save this and now if we try to

6:42

S… Speaker 1 (237. Submitting the Recipe Edit Form)

edit this recipe,

6:43

S… Speaker 1 (237. Submitting the Recipe Edit Form)

put a 2 after the name.

6:45

S… Speaker 1 (237. Submitting the Recipe Edit Form)

Now it got updated here.

6:47

S… Speaker 1 (237. Submitting the Recipe Edit Form)

And now if I add a new recipe here,

6:50

S… Speaker 1 (237. Submitting the Recipe Edit Form)

some image that won't be displayed,

6:53

S… Speaker 1 (237. Submitting the Recipe Edit Form)

of course, just a test.

6:55

S… Speaker 1 (237. Submitting the Recipe Edit Form)

And let's even add an ingredient,

6:57

S… Speaker 1 (237. Submitting the Recipe Edit Form)

bread 10.

6:58

S… Speaker 1 (237. Submitting the Recipe Edit Form)

If I hit save.

7:01

S… Speaker 1 (237. Submitting the Recipe Edit Form)

We see it here,

7:02

S… Speaker 1 (237. Submitting the Recipe Edit Form)

of course, without an image,

7:03

S… Speaker 1 (237. Submitting the Recipe Edit Form)

but that seems to work.

7:05

S… Speaker 1 (237. Submitting the Recipe Edit Form)

And if I put this to the shopping list,

7:07

S… Speaker 1 (237. Submitting the Recipe Edit Form)

bread was added.

7:08

S… Speaker 1 (237. Submitting the Recipe Edit Form)

So that is all working here.

7:10

S… Speaker 1 (237. Submitting the Recipe Edit Form)

And the errors you see here on the right,

7:13

S… Speaker 1 (237. Submitting the Recipe Edit Form)

they simply occur because we can't fetch this image.

7:16

S… Speaker 1 (237. Submitting the Recipe Edit Form)

So this is our recipe for now

7:20

S… Speaker 1 (237. Submitting the Recipe Edit Form)

working,

7:20

S… Speaker 1 (237. Submitting the Recipe Edit Form)

both for updating and for new recipes.

7:24

S… Speaker 1 (237. Submitting the Recipe Edit Form)

Now let's see if there is something else we should do.

ఈ అపోహింగ్‌ను (స్వయంలేని పద గుర్తింపు) సంప్రదాయం (ఆఫ్యుటికల్ ప్రసంగ గుర్తింపు) రూపొందించారు. దోషములు వుండు. ఫార్మేట్‌ను సంక్లిష్టమైన ఆడియోకు వ్యతిరేకంగా నిర్ధారించండి. AI విధానము

❤️ ప్రేమ STT.ai? మీ స్నేహితులకు చెప్పండి!

సారాంశం

ఈ పిక్సెస్ యొక్క యాక్సెస్‌బిలిటి సంగ్రహం ఉద్భవించుటకు కాంక్వెరర్‌ను నొక్కుము.

ఈ రిపోర్టు గురించి AI ను అడుగుము

ఈ అస్థికల పేటిక గురించి ఏమైనా అడగండి —⁠ ఏ.

మరొకరు రాసుకోండి