230. Creating the Template for the (Reactive) Recipe Edit Form

0:02

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

In the last lectures,

0:03

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

we edited our form using the template -driven approach.

0:06

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

Now let's move on to the reactive approach for the

0:11

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

new recipe or editing an existing one.

0:13

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

We got our recipeEdit component here,

0:16

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

and it doesn't have a form inside of it.

0:20

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

So we should definitely change this.

0:23

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

In here,

0:24

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

I will start by adding a row and then a column which should span

0:28

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

the full width on all device sizes and then the form without an

0:32

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

action because we don't want to send a request.

0:34

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

We want to handle it in Angular.

0:36

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

Now we will need a couple of inputs here.

0:39

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

I will actually begin with the save and cancel buttons

0:43

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

though.

0:43

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

So right at the start of this form,

0:46

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

I'll have another bootstrap row.

0:48

S… Speaker 2 (230. Creating the Template for the (Reactive) Recipe Edit Form)

Col xs12 will be the width.

0:52

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

And here I want to have a button of type submit with

0:57

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

a class of button and then button success so that

1:01

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

it's a green button,

1:02

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

which should simply save the form,

1:05

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

should save the recipe.

1:06

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

I'll have a second button of type button so that it doesn't

1:11

S… Speaker 2 (230. Creating the Template for the (Reactive) Recipe Edit Form)

submit the form,

1:11

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

which will get the class button danger,

1:15

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

which should simply cancel the editing here.

1:20

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

So these are the two buttons which allow me to control the form in the end.

1:23

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

Now for the inputs.

1:25

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

I definitely want a row with my

1:30

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

default column width here,

1:31

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

where I will add a div with the form group CSS class.

1:36

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

To simply use that bootstrap CSS class to give it some nice styling,

1:40

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

then I'll add a label for the name of that

1:44

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

recipe, and I'll say name here.

1:47

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

And I will add the input.

1:49

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

The input will be of type text with the ID name maybe.

1:53

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

And let's already structure this over multiple lines.

1:56

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

And with a class of form control to make it look

2:00

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

nice.

2:01

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

Now I will actually copy that row and

2:05

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

paste it in below this name.

2:07

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

Here I want to have my image path.

2:11

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

So I'll name it image URL here,

2:14

S… Speaker 2 (230. Creating the Template for the (Reactive) Recipe Edit Form)

this input.

2:14

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

And here I simply want the user to paste in the image path.

2:18

S… Speaker 2 (230. Creating the Template for the (Reactive) Recipe Edit Form)

So that will be this row.

2:21

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

Below it I'll add another row.

2:23

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

Here I won't have my form group though.

2:26

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

Instead I want to preview the image the user pasted in.

2:30

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

So I will simply add my image element here.

2:34

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

I will later bind the source and assign

2:39

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

the image responsive class to it.

2:42

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

We will fine tune this later if needed.

2:44

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

So that allows the user to enter a title and

2:48

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

an image and see that image as a preview.

2:50

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

Now I'll add another row.

2:54

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

with another label,

2:55

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

which should now say description.

2:57

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

So the description of our recipe or the content of the recipe.

3:01

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

So I'll assign this for the ID description,

3:04

S… Speaker 2 (230. Creating the Template for the (Reactive) Recipe Edit Form)

which of course will be this,

3:06

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

but this will not be an input.

3:08

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

I'll change it to a text area.

3:10

S… Speaker 2 (230. Creating the Template for the (Reactive) Recipe Edit Form)

Therefore,

3:10

S… Speaker 2 (230. Creating the Template for the (Reactive) Recipe Edit Form)

I also need a closing tag for this.

3:12

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

On this text area,

3:15

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

I want to provide,

3:16

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

let's say six rows for typing so that it's not too big,

3:20

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

not too small,

3:20

S… Speaker 2 (230. Creating the Template for the (Reactive) Recipe Edit Form)

should be okay.

3:22

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

Well, and then below this I'll add yet number

3:27

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

div.

3:27

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

This will later be required for the ingredients of

3:31

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

that recipe here.

3:33

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

So here we will actually need to create an array of controls and

3:37

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

we will need to manage this.

3:38

S… Speaker 2 (230. Creating the Template for the (Reactive) Recipe Edit Form)

We did learn how to do this,

3:39

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

but here we will see it in practice in a real project.

3:44

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

Now here as this will be for my array of items I will get rid of

3:48

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

the label and get rid of the ID.

3:50

S… Speaker 2 (230. Creating the Template for the (Reactive) Recipe Edit Form)

Also get rid of that div here.

3:52

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

Instead I will add a new row inside of there.

3:56

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

We're going to have multiple ingredients probably and each row

4:00

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

should then have a couple of columns.

4:02

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

The first one spanning almost the entire width.

4:05

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

It will hold the input for the name of the ingredient.

4:09

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

The second one

4:12

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

being very narrow next to it which should hold the

4:16

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

amount and the third one also a very small

4:21

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

column should hold a button which allows me to delete

4:25

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

an ingredient therefore button danger and put an X

4:29

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

on it

4:30

S… Speaker 2 (230. Creating the Template for the (Reactive) Recipe Edit Form)

So if you have a look at this,

4:31

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

that is how a single ingredient will look like.

4:34

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

Now, we don't have descriptions for these inputs.

4:36

S… Speaker 2 (230. Creating the Template for the (Reactive) Recipe Edit Form)

You could, of course,

4:37

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

restructure this form and try placing labels next to them or use a different layout.

4:41

S… Speaker 2 (230. Creating the Template for the (Reactive) Recipe Edit Form)

I like that layout here,

4:43

S… Speaker 2 (230. Creating the Template for the (Reactive) Recipe Edit Form)

though. With that,

4:45

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

we got the HTML code almost finished.

4:48

S… Speaker 2 (230. Creating the Template for the (Reactive) Recipe Edit Form)

There is something missing.

4:50

S… Speaker 2 (230. Creating the Template for the (Reactive) Recipe Edit Form)

But before we work on this,

4:51

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

let's make this base form work without

4:55

S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)

ingredients for a start.

230. Creating the Template for the (Reactive) Recipe Edit Form

Santrauka

Klausti AI apie šį transkriptą