237. Submitting the Recipe Edit Form

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.

237. Submitting the Recipe Edit Form

Buod

Magtanong sa AI Tungkol sa Transcript na Ito