190. TD Creating the Form and Registering the Controls

0:01

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

In the last video,

0:02

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

we had a look at the basic setup of our form.

0:04

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

Now let's understand how Angular creates such a JavaScript object

0:09

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

representing our form in the template -driven approach.

0:12

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

The great thing is,

0:13

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

you don't have to do anything.

0:15

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

Well, almost anything.

0:17

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

Make sure that in your app module,

0:20

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

you actually import the forms module added here to your

0:24

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

imports array and have the import at the top of this file.

0:27

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

As the name implies,

0:28

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

this built -in module shipping with Angular includes

0:33

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

a lot of forms -related functionalities and is actually needed

0:37

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

to get this template -driven approach to work,

0:39

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

to get this form creation by Angular to work.

0:43

S… Speaker 2 (190. TD Creating the Form and Registering the Controls)

Now,

0:44

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

by default in a CLI project,

0:46

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

this should already be imported,

0:47

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

so it should work fine,

0:48

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

but again,

0:49

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

I'm just highlighting it because it's super important that you have this import,

0:53

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

otherwise the following steps will not work.

0:56

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

With this imported,

0:58

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

Angular will actually automatically create a form for

1:02

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

you, so a JavaScript representation of that form,

1:05

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

when it detects a form element in HTML code,

1:09

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

like it does here.

1:10

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

So you can think of that form element serving as a selector

1:14

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

for some Angular directive,

1:16

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

which then creates such a JavaScript representation of the form

1:21

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

for you.

1:21

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

Of course,

1:22

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

you can't see that.

1:24

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

form representation as of now.

1:26

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

And it would be very empty because one thing

1:30

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

does not happen automatically.

1:32

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

Angular will not automatically detect your inputs in

1:36

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

this form.

1:36

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

And the simple reason for this is that whilst you could argue that it should

1:40

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

be able to scan your HTML code and detect that you have an input here and here

1:45

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

and that you have a select dropdown here.

1:47

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

you still might not want to add all these elements as

1:52

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

controls to your form.

1:53

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

So with control,

1:54

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

I'm referring to what is in the JavaScript object.

1:57

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

And again,

1:58

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

not every input in your HTML code might be a control you want to have

2:02

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

in your JavaScript form.

2:03

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

Maybe you have a dropdown,

2:05

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

which value only changes something you view on the

2:09

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

UI, but the input should not actually be part of what gets submitted.

2:14

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

Maybe you use some third -party package which adds some custom form controls

2:18

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

which are not labeled input,

2:21

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

which don't use input as a selector,

2:22

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

and then Angular would have no chance of detecting that this is a control of your

2:27

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

form.

2:27

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

So you still need to register controls manually.

2:30

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

You need to tell Angular,

2:32

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

hey, within that form element,

2:34

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

what should be an actual control of my form?

2:38

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

And this is what we're going to do now.

2:40

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

Tell Angular how does our form look like?

2:43

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

Which controls do we want to have?

2:44

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

In the template -driven approach,

2:46

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

this is super simple.

2:47

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

You simply pick the input which you want to add as a control,

2:51

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

like this input here.

2:53

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

And I'm just going to structure it a bit different to split it up

2:57

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

over multiple lines to make it easier to read.

2:59

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

And then you add ng -model,

3:02

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

like this.

3:03

S… Speaker 2 (190. TD Creating the Form and Registering the Controls)

Now,

3:03

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

you might already know ng -model.

3:06

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

from the two -way binding,

3:07

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

two -way data binding,

3:09

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

and it actually is the same directive.

3:12

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

In two -way data binding,

3:14

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

though, you saw that we used it with square brackets and parentheses wrapping

3:18

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

ng -model.

3:19

S… Speaker 2 (190. TD Creating the Form and Registering the Controls)

Now,

3:20

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

we will have a look at this later again,

3:23

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

but for now,

3:23

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

let's add without any parentheses,

3:26

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

without any square brackets,

3:28

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

just like this.

3:29

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

This will be enough to tell Angular,

3:31

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

hey, this input

3:34

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

is actually a control of my form.

3:37

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

So ng -model in the end is a directive made

3:42

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

available in the forms module,

3:45

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

something I mentioned earlier in the course when we had a look at two -way data binding.

3:49

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

This is key to understand.

3:50

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

You can use it to get two -way data binding,

3:54

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

but it actually is part of a bigger module with more features,

3:58

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

giving you full control over forms.

4:01

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

Now for this to work,

4:03

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

for this to be recognized as a control in your form,

4:06

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

we need to give Angular one other piece of information.

4:10

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

The name of this control.

4:12

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

Right now it would see,

4:13

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

okay, this input should be part of the JavaScript object representation

4:18

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

of this form.

4:19

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

So whatever the user enters here as a value should be the value.

4:24

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

of this control,

4:26

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

but what's the name of that control?

4:27

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

We need to give that information to Angular and we do this by adding

4:31

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

the normal HTML attribute name.

4:34

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

So name is nothing Angular 2 specific,

4:36

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

name is the default attribute you can add to any HTML control.

4:41

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

Now here the name might be username because that is what we can enter in this input.

4:46

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

And with this,

4:47

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

this control will be registered in this JavaScript representation

4:52

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

of the form.

4:53

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

Now I'll do the same for the email.

4:55

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

Restructure it so that it's easier to read.

4:58

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

Add ng -model.

4:59

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

And add a name.

5:02

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

Like for example,

5:03

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

email here.

5:05

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

Well and the same is true for the select here,

5:08

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

which is just another type of HTML input Here we can also

5:12

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

add ng -model

5:14

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

And we can add a name like secret because I'm asking for a secret

5:18

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

question here.

5:19

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

And with that,

5:20

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

we registered all the controls.

5:22

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

Of course,

5:23

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

we can't see that much though.

5:26

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

Well,

5:27

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

that is something we're going to have a look at in the next lecture when we see how we

5:31

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

can submit such a form and therefore how we can see these

5:35

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

key value pairs representing what the user entered into which

5:39

S… Speaker 1 (190. TD Creating the Form and Registering the Controls)

input.

190. TD Creating the Form and Registering the Controls

Resumo

Preguntarlle á IA sobre esta transcrición