231. Creating the Form For Editing Recipes

0:02

S… Speaker 1 (231. Creating the Form For Editing Recipes)

So in the last section we created the HTML code for our form.

0:05

S… Speaker 1 (231. Creating the Form For Editing Recipes)

Now let's initialize our form.

0:08

S… Speaker 1 (231. Creating the Form For Editing Recipes)

And we will use the reactive approach as I already said.

0:11

S… Speaker 1 (231. Creating the Form For Editing Recipes)

Now for this approach it's important to understand if we are in edit

0:15

S… Speaker 1 (231. Creating the Form For Editing Recipes)

mode or new mode.

0:17

S… Speaker 1 (231. Creating the Form For Editing Recipes)

And we do get this information here.

0:19

S… Speaker 1 (231. Creating the Form For Editing Recipes)

Why is that important?

0:21

S… Speaker 1 (231. Creating the Form For Editing Recipes)

Well, of course,

0:22

S… Speaker 1 (231. Creating the Form For Editing Recipes)

because depending on this,

0:23

S… Speaker 1 (231. Creating the Form For Editing Recipes)

we need to pre -populate the fields or not.

0:27

S… Speaker 1 (231. Creating the Form For Editing Recipes)

So I will create a new private method in the

0:31

S… Speaker 1 (231. Creating the Form For Editing Recipes)

recipeEdit component,

0:33

S… Speaker 1 (231. Creating the Form For Editing Recipes)

which I'll name initForm,

0:35

S… Speaker 1 (231. Creating the Form For Editing Recipes)

because it is responsible for initializing our form.

0:39

S… Speaker 1 (231. Creating the Form For Editing Recipes)

The form itself shall be a property here,

0:42

S… Speaker 1 (231. Creating the Form For Editing Recipes)

so I will name it recipeForm,

0:44

S… Speaker 1 (231. Creating the Form For Editing Recipes)

and it will be of type formGroup,

0:46

S… Speaker 1 (231. Creating the Form For Editing Recipes)

as you learned,

0:47

S… Speaker 1 (231. Creating the Form For Editing Recipes)

to be imported from addAngularForms.

0:51

S… Speaker 1 (231. Creating the Form For Editing Recipes)

Now we can build this recipe form here in init

0:55

S… Speaker 1 (231. Creating the Form For Editing Recipes)

form.

0:55

S… Speaker 1 (231. Creating the Form For Editing Recipes)

Basically,

0:57

S… Speaker 1 (231. Creating the Form For Editing Recipes)

I will reach out to it and assign a value and this value will

1:01

S… Speaker 1 (231. Creating the Form For Editing Recipes)

be a new form group to give us the outer shell

1:05

S… Speaker 1 (231. Creating the Form For Editing Recipes)

of our form,

1:07

S… Speaker 1 (231. Creating the Form For Editing Recipes)

so to say,

1:07

S… Speaker 1 (231. Creating the Form For Editing Recipes)

the frame.

1:08

S… Speaker 1 (231. Creating the Form For Editing Recipes)

Form group takes a JavaScript object where we have

1:12

S… Speaker 1 (231. Creating the Form For Editing Recipes)

key value pairs for the controls we want to register.

1:15

S… Speaker 1 (231. Creating the Form For Editing Recipes)

So the first control I do want to register here is

1:20

S… Speaker 1 (231. Creating the Form For Editing Recipes)

the name.

1:21

S… Speaker 1 (231. Creating the Form For Editing Recipes)

The name of the recipe.

1:23

S… Speaker 1 (231. Creating the Form For Editing Recipes)

This will be a new form control,

1:25

S… Speaker 1 (231. Creating the Form For Editing Recipes)

so we should import form control from addAngularForms2.

1:29

S… Speaker 1 (231. Creating the Form For Editing Recipes)

And here now,

1:32

S… Speaker 1 (231. Creating the Form For Editing Recipes)

as I said,

1:33

S… Speaker 1 (231. Creating the Form For Editing Recipes)

it's important to decide whether we are in edit mode or not,

1:36

S… Speaker 1 (231. Creating the Form For Editing Recipes)

because that will determine whether we want to assign an initial value

1:41

S… Speaker 1 (231. Creating the Form For Editing Recipes)

or not.

1:41

S… Speaker 1 (231. Creating the Form For Editing Recipes)

Well,

1:42

S… Speaker 1 (231. Creating the Form For Editing Recipes)

we could simply create a variable at the top here,

1:45

S… Speaker 1 (231. Creating the Form For Editing Recipes)

which holds our recipe name,

1:48

S… Speaker 1 (231. Creating the Form For Editing Recipes)

and let's set it to an empty string by default.

1:52

S… Speaker 1 (231. Creating the Form For Editing Recipes)

Then let's add some logic which decides what

1:57

S… Speaker 1 (231. Creating the Form For Editing Recipes)

the value should be if we are in edit mode.

1:59

S… Speaker 1 (231. Creating the Form For Editing Recipes)

So let's check if this edit mode.

2:02

S… Speaker 1 (231. Creating the Form For Editing Recipes)

If that's the case,

2:04

S… Speaker 1 (231. Creating the Form For Editing Recipes)

then recipe name should probably be something else.

2:09

S… Speaker 1 (231. Creating the Form For Editing Recipes)

And it should probably be the value of

2:13

S… Speaker 1 (231. Creating the Form For Editing Recipes)

the recipe we can load with the ID we got here.

2:17

S… Speaker 1 (231. Creating the Form For Editing Recipes)

We do have the ID stored up there.

2:21

S… Speaker 1 (231. Creating the Form For Editing Recipes)

So we can simply inject our recipe

2:25

S… Speaker 1 (231. Creating the Form For Editing Recipes)

service.

2:26

S… Speaker 1 (231. Creating the Form For Editing Recipes)

Let's do this here.

2:27

S… Speaker 1 (231. Creating the Form For Editing Recipes)

Recipe service.

2:29

S… Speaker 1 (231. Creating the Form For Editing Recipes)

Make sure to add the import at the top here.

2:32

S… Speaker 1 (231. Creating the Form For Editing Recipes)

And now we can fetch our recipe

2:36

S… Speaker 1 (231. Creating the Form For Editing Recipes)

here.

2:37

S… Speaker 1 (231. Creating the Form For Editing Recipes)

The recipe we are currently editing.

2:39

S… Speaker 1 (231. Creating the Form For Editing Recipes)

So I will fetch it right at the beginning.

2:42

S… Speaker 1 (231. Creating the Form For Editing Recipes)

The recipe.

2:43

S… Speaker 1 (231. Creating the Form For Editing Recipes)

Reaching out to the recipe service.

2:45

S… Speaker 1 (231. Creating the Form For Editing Recipes)

And then with...

2:47

S… Speaker 1 (231. Creating the Form For Editing Recipes)

get recipe and passing the ID of the recipe

2:51

S… Speaker 1 (231. Creating the Form For Editing Recipes)

we know we are editing,

2:52

S… Speaker 1 (231. Creating the Form For Editing Recipes)

I can get it.

2:54

S… Speaker 1 (231. Creating the Form For Editing Recipes)

Actually,

2:55

S… Speaker 1 (231. Creating the Form For Editing Recipes)

I shouldn't do it here because I would try to get one if we don't have an ID

2:59

S… Speaker 1 (231. Creating the Form For Editing Recipes)

because we are not in edit mode.

3:00

S… Speaker 1 (231. Creating the Form For Editing Recipes)

I should do it in here.

3:02

S… Speaker 1 (231. Creating the Form For Editing Recipes)

So now we got a recipe.

3:05

S… Speaker 1 (231. Creating the Form For Editing Recipes)

Now we can simply access the name of the recipe and assign this

3:09

S… Speaker 1 (231. Creating the Form For Editing Recipes)

to our variable here.

3:12

S… Speaker 1 (231. Creating the Form For Editing Recipes)

Now,

3:12

S… Speaker 1 (231. Creating the Form For Editing Recipes)

the same will be true for the image URL,

3:15

S… Speaker 1 (231. Creating the Form For Editing Recipes)

the recipe image path.

3:17

S… Speaker 1 (231. Creating the Form For Editing Recipes)

It's an empty string by default.

3:20

S… Speaker 1 (231. Creating the Form For Editing Recipes)

And the same is probably true for the description.

3:23

S… Speaker 1 (231. Creating the Form For Editing Recipes)

So recipe description is also an empty string by default.

3:26

S… Speaker 1 (231. Creating the Form For Editing Recipes)

And the ingredients,

3:28

S… Speaker 1 (231. Creating the Form For Editing Recipes)

I'll come back to these.

3:29

S… Speaker 1 (231. Creating the Form For Editing Recipes)

So for now,

3:31

S… Speaker 1 (231. Creating the Form For Editing Recipes)

let's overwrite all these variables if we are in edit

3:35

S… Speaker 1 (231. Creating the Form For Editing Recipes)

mode.

3:35

S… Speaker 1 (231. Creating the Form For Editing Recipes)

So recipe image path will be set to recipe image path.

3:40

S… Speaker 1 (231. Creating the Form For Editing Recipes)

and recipe description will be set to recipe description

3:45

S… Speaker 1 (231. Creating the Form For Editing Recipes)

here.

3:45

S… Speaker 1 (231. Creating the Form For Editing Recipes)

And with that,

3:47

S… Speaker 1 (231. Creating the Form For Editing Recipes)

we can simply assign recipe name here

3:51

S… Speaker 1 (231. Creating the Form For Editing Recipes)

for the name as a default value because it will either be an empty string,

3:55

S… Speaker 1 (231. Creating the Form For Editing Recipes)

that's the default,

3:56

S… Speaker 1 (231. Creating the Form For Editing Recipes)

or if we happen to be in edit mode,

3:58

S… Speaker 1 (231. Creating the Form For Editing Recipes)

it will have the name of the recipe we are editing as

4:03

S… Speaker 1 (231. Creating the Form For Editing Recipes)

a value.

4:04

S… Speaker 1 (231. Creating the Form For Editing Recipes)

So with that,

4:05

S… Speaker 1 (231. Creating the Form For Editing Recipes)

we got the name.

4:06

S… Speaker 1 (231. Creating the Form For Editing Recipes)

Now let's also assign the image path.

4:09

S… Speaker 1 (231. Creating the Form For Editing Recipes)

Here I'll also add a new form control and set this

4:13

S… Speaker 1 (231. Creating the Form For Editing Recipes)

to recipe image path.

4:15

S… Speaker 1 (231. Creating the Form For Editing Recipes)

As a side note,

4:16

S… Speaker 1 (231. Creating the Form For Editing Recipes)

we'll take care about validation later.

4:18

S… Speaker 1 (231. Creating the Form For Editing Recipes)

And let's assign the description here.

4:21

S… Speaker 1 (231. Creating the Form For Editing Recipes)

A new form control again.

4:23

S… Speaker 1 (231. Creating the Form For Editing Recipes)

And we should assign the recipe description.

4:26

S… Speaker 1 (231. Creating the Form For Editing Recipes)

Now again,

4:28

S… Speaker 1 (231. Creating the Form For Editing Recipes)

I'll take care about the ingredients later.

4:31

S… Speaker 1 (231. Creating the Form For Editing Recipes)

That is our base form created.

4:34

S… Speaker 1 (231. Creating the Form For Editing Recipes)

Now, when should we call init form this method here?

4:38

S… Speaker 1 (231. Creating the Form For Editing Recipes)

We should call it whenever our route

4:43

S… Speaker 1 (231. Creating the Form For Editing Recipes)

params change because that indicates that we reloaded the page.

4:47

S… Speaker 1 (231. Creating the Form For Editing Recipes)

So that is where we should call this init form.

4:50

S… Speaker 1 (231. Creating the Form For Editing Recipes)

Now with that,

4:52

S… Speaker 1 (231. Creating the Form For Editing Recipes)

we are creating the form and it probably will work.

4:56

S… Speaker 1 (231. Creating the Form For Editing Recipes)

However,

4:56

S… Speaker 1 (231. Creating the Form For Editing Recipes)

now we need to synchronize our form to our HTML

5:01

S… Speaker 1 (231. Creating the Form For Editing Recipes)

code.

5:01

S… Speaker 1 (231. Creating the Form For Editing Recipes)

We'll do this in the next lecture.

231. Creating the Form For Editing Recipes

Summa

De hoc translatio scripsit.