191. TD Submitting and Using the Form

0:02

S… Speaker 1 (191. TD Submitting and Using the Form)

In the last lecture,

0:03

S… Speaker 1 (191. TD Submitting and Using the Form)

we configured our form here.

0:06

S… Speaker 1 (191. TD Submitting and Using the Form)

We added some controls by placing ng -model on the inputs.

0:10

S… Speaker 1 (191. TD Submitting and Using the Form)

Now let's make this form submitable so that we can actually

0:14

S… Speaker 1 (191. TD Submitting and Using the Form)

see what the user entered.

0:16

S… Speaker 1 (191. TD Submitting and Using the Form)

For this...

0:19

S… Speaker 1 (191. TD Submitting and Using the Form)

I'll go to my app component.

0:21

S… Speaker 1 (191. TD Submitting and Using the Form)

I already do have a method here which we will use later.

0:24

S… Speaker 1 (191. TD Submitting and Using the Form)

Let's ignore it for now.

0:25

S… Speaker 1 (191. TD Submitting and Using the Form)

And I'll add a new method,

0:27

S… Speaker 1 (191. TD Submitting and Using the Form)

onSubmit maybe.

0:29

S… Speaker 1 (191. TD Submitting and Using the Form)

This should be triggered whenever this form is submitted by

0:33

S… Speaker 1 (191. TD Submitting and Using the Form)

the user.

0:33

S… Speaker 1 (191. TD Submitting and Using the Form)

In onSubmit,

0:35

S… Speaker 1 (191. TD Submitting and Using the Form)

I want to output whatever the user entered.

0:38

S… Speaker 1 (191. TD Submitting and Using the Form)

Well,

0:39

S… Speaker 1 (191. TD Submitting and Using the Form)

first of all,

0:40

S… Speaker 1 (191. TD Submitting and Using the Form)

we need to call this method.

0:41

S… Speaker 1 (191. TD Submitting and Using the Form)

So back in the template,

0:42

S… Speaker 1 (191. TD Submitting and Using the Form)

how can we call onSubmit?

0:45

S… Speaker 1 (191. TD Submitting and Using the Form)

Now you might think that a good place would be on a click listener on this

0:49

S… Speaker 1 (191. TD Submitting and Using the Form)

button here at the bottom,

0:50

S… Speaker 1 (191. TD Submitting and Using the Form)

right? Because this is the button we click when we want to submit the form.

0:54

S… Speaker 1 (191. TD Submitting and Using the Form)

However,

0:55

S… Speaker 1 (191. TD Submitting and Using the Form)

this is not the best place to do it.

0:57

S… Speaker 1 (191. TD Submitting and Using the Form)

Keep in mind that this button here is of type submit.

1:00

S… Speaker 1 (191. TD Submitting and Using the Form)

So if we click it as it is placed inside of a HTML form

1:05

S… Speaker 1 (191. TD Submitting and Using the Form)

element, something else will happen.

1:07

S… Speaker 1 (191. TD Submitting and Using the Form)

The default behavior of HTML will be triggered

1:12

S… Speaker 1 (191. TD Submitting and Using the Form)

here to call it like this.

1:13

S… Speaker 1 (191. TD Submitting and Using the Form)

If you have a button in a form element,

1:16

S… Speaker 1 (191. TD Submitting and Using the Form)

this button will submit the form,

1:18

S… Speaker 1 (191. TD Submitting and Using the Form)

will send a request normally,

1:20

S… Speaker 1 (191. TD Submitting and Using the Form)

but besides that,

1:22

S… Speaker 1 (191. TD Submitting and Using the Form)

it will also trigger a JavaScript event,

1:25

S… Speaker 1 (191. TD Submitting and Using the Form)

gsubmit event,

1:26

S… Speaker 1 (191. TD Submitting and Using the Form)

that's built into JavaScript,

1:28

S… Speaker 1 (191. TD Submitting and Using the Form)

built into HTML,

1:29

S… Speaker 1 (191. TD Submitting and Using the Form)

you could say.

1:30

S… Speaker 1 (191. TD Submitting and Using the Form)

Angular takes advantage of this and gives us

1:34

S… Speaker 1 (191. TD Submitting and Using the Form)

a directive we can place on this form element as a whole.

1:38

S… Speaker 1 (191. TD Submitting and Using the Form)

It is called ngsubmit

1:41

S… Speaker 1 (191. TD Submitting and Using the Form)

and it actually only gives us one event we can listen to.

1:44

S… Speaker 1 (191. TD Submitting and Using the Form)

So let's wrap it in parentheses.

1:46

S… Speaker 1 (191. TD Submitting and Using the Form)

This event made available by the ngSubmit directive

1:50

S… Speaker 1 (191. TD Submitting and Using the Form)

will be fired whenever this form is submitted.

1:55

S… Speaker 1 (191. TD Submitting and Using the Form)

So whenever this default behavior is triggered.

1:57

S… Speaker 1 (191. TD Submitting and Using the Form)

And here we can call onSubmit like

2:02

S… Speaker 1 (191. TD Submitting and Using the Form)

this.

2:02

S… Speaker 1 (191. TD Submitting and Using the Form)

And to show you that this works,

2:04

S… Speaker 1 (191. TD Submitting and Using the Form)

I will simply go into onSubmit and log submitted

2:09

S… Speaker 1 (191. TD Submitting and Using the Form)

here, just like that.

2:11

S… Speaker 1 (191. TD Submitting and Using the Form)

Now if we save this and let it recompile let's go back and let's open up the developer

2:15

S… Speaker 1 (191. TD Submitting and Using the Form)

tools

2:17

S… Speaker 1 (191. TD Submitting and Using the Form)

And if I now hit the submit button,

2:20

S… Speaker 1 (191. TD Submitting and Using the Form)

you see submitted here on the right because indeed the form

2:24

S… Speaker 1 (191. TD Submitting and Using the Form)

gets submitted.

2:25

S… Speaker 1 (191. TD Submitting and Using the Form)

Now it would be nice to see the actual values of

2:29

S… Speaker 1 (191. TD Submitting and Using the Form)

the form though,

2:30

S… Speaker 1 (191. TD Submitting and Using the Form)

to see that form object.

2:32

S… Speaker 1 (191. TD Submitting and Using the Form)

And to see it,

2:33

S… Speaker 1 (191. TD Submitting and Using the Form)

we have to go back to our template because we're in the template driven

2:38

S… Speaker 1 (191. TD Submitting and Using the Form)

approach.

2:38

S… Speaker 1 (191. TD Submitting and Using the Form)

So as a rule of thumb,

2:39

S… Speaker 1 (191. TD Submitting and Using the Form)

everything you do,

2:41

S… Speaker 1 (191. TD Submitting and Using the Form)

you do it in the template,

2:42

S… Speaker 1 (191. TD Submitting and Using the Form)

everything.

2:44

S… Speaker 1 (191. TD Submitting and Using the Form)

You want to change about this form,

2:45

S… Speaker 1 (191. TD Submitting and Using the Form)

you want to add as functionality,

2:48

S… Speaker 1 (191. TD Submitting and Using the Form)

you do it in a template.

2:49

S… Speaker 1 (191. TD Submitting and Using the Form)

On this form object,

2:52

S… Speaker 1 (191. TD Submitting and Using the Form)

we want to get access to the form created by Angular.

2:55

S… Speaker 1 (191. TD Submitting and Using the Form)

Now you'll learn about local references you can place on HTML elements

3:00

S… Speaker 1 (191. TD Submitting and Using the Form)

to get access to them.

3:01

S… Speaker 1 (191. TD Submitting and Using the Form)

So we could place hashtag F on the form element,

3:04

S… Speaker 1 (191. TD Submitting and Using the Form)

and now we could access this form element on,

3:08

S… Speaker 1 (191. TD Submitting and Using the Form)

well,

3:09

S… Speaker 1 (191. TD Submitting and Using the Form)

the F reference in our template,

3:11

S… Speaker 1 (191. TD Submitting and Using the Form)

and we could pass F as an argument to the onSubmit method and

3:15

S… Speaker 1 (191. TD Submitting and Using the Form)

print it there.

3:16

S… Speaker 1 (191. TD Submitting and Using the Form)

So now we know that we get the form,

3:19

S… Speaker 1 (191. TD Submitting and Using the Form)

and actually this will be of type element ref,

3:22

S… Speaker 1 (191. TD Submitting and Using the Form)

as we learned.

3:23

S… Speaker 1 (191. TD Submitting and Using the Form)

So if we import element ref and make this of type element ref here,

3:27

S… Speaker 1 (191. TD Submitting and Using the Form)

and we output the form here,

3:29

S… Speaker 1 (191. TD Submitting and Using the Form)

So this element.

3:30

S… Speaker 1 (191. TD Submitting and Using the Form)

If we now go back to this and hit submit,

3:33

S… Speaker 1 (191. TD Submitting and Using the Form)

yeah,

3:34

S… Speaker 1 (191. TD Submitting and Using the Form)

we indeed see that form object.

3:37

S… Speaker 1 (191. TD Submitting and Using the Form)

We see some strange classes here.

3:38

S… Speaker 1 (191. TD Submitting and Using the Form)

I will come back to them.

3:39

S… Speaker 1 (191. TD Submitting and Using the Form)

But that still is not what we want.

3:42

S… Speaker 1 (191. TD Submitting and Using the Form)

It's not a JavaScript object created by Angular.

3:45

S… Speaker 1 (191. TD Submitting and Using the Form)

But this object is there.

3:47

S… Speaker 1 (191. TD Submitting and Using the Form)

We just need to know how to get to it.

3:49

S… Speaker 1 (191. TD Submitting and Using the Form)

And there actually is a trick,

3:52

S… Speaker 1 (191. TD Submitting and Using the Form)

you could call it.

3:52

S… Speaker 1 (191. TD Submitting and Using the Form)

But it's no trick.

3:53

S… Speaker 1 (191. TD Submitting and Using the Form)

It's the default way to get access to this automatically created object.

3:57

S… Speaker 1 (191. TD Submitting and Using the Form)

You set this local reference equal to something.

4:01

S… Speaker 1 (191. TD Submitting and Using the Form)

Now, we haven't done that yet.

4:02

S… Speaker 1 (191. TD Submitting and Using the Form)

But we can set it equal to something.

4:06

S… Speaker 1 (191. TD Submitting and Using the Form)

exposed by this form here.

4:09

S… Speaker 1 (191. TD Submitting and Using the Form)

Keep in mind,

4:10

S… Speaker 1 (191. TD Submitting and Using the Form)

the form element is kind of a selector for a directive

4:14

S… Speaker 1 (191. TD Submitting and Using the Form)

built into Angular,

4:16

S… Speaker 1 (191. TD Submitting and Using the Form)

which will create this JavaScript object automatically.

4:18

S… Speaker 1 (191. TD Submitting and Using the Form)

And then it will expose some data we can fetch here on

4:23

S… Speaker 1 (191. TD Submitting and Using the Form)

this form element.

4:24

S… Speaker 1 (191. TD Submitting and Using the Form)

We can get access to it by writing ng form here between the

4:28

S… Speaker 1 (191. TD Submitting and Using the Form)

quotation marks.

4:28

S… Speaker 1 (191. TD Submitting and Using the Form)

So this might look super strange,

4:30

S… Speaker 1 (191. TD Submitting and Using the Form)

but what this in the end does is it tells Angular,

4:34

S… Speaker 1 (191. TD Submitting and Using the Form)

hey,

4:35

S… Speaker 1 (191. TD Submitting and Using the Form)

please give me access to this form you created automatically.

4:39

S… Speaker 1 (191. TD Submitting and Using the Form)

That's just something you have to keep in mind.

4:41

S… Speaker 1 (191. TD Submitting and Using the Form)

This is how you get access to the form to this JavaScript object

4:46

S… Speaker 1 (191. TD Submitting and Using the Form)

created by Angular automatically.

4:49

S… Speaker 1 (191. TD Submitting and Using the Form)

So,

4:50

S… Speaker 1 (191. TD Submitting and Using the Form)

therefore,

4:50

S… Speaker 1 (191. TD Submitting and Using the Form)

here where we get this form,

4:54

S… Speaker 1 (191. TD Submitting and Using the Form)

we now still pass it.

4:56

S… Speaker 1 (191. TD Submitting and Using the Form)

Now this will no longer be an element ref,

4:58

S… Speaker 1 (191. TD Submitting and Using the Form)

so let's remove this type here.

5:00

S… Speaker 1 (191. TD Submitting and Using the Form)

Instead,

5:01

S… Speaker 1 (191. TD Submitting and Using the Form)

this will now be of ngForm.

5:04

S… Speaker 1 (191. TD Submitting and Using the Form)

So let's import ngForm from addAngularForms.

5:09

S… Speaker 1 (191. TD Submitting and Using the Form)

And it kind of makes sense that it is of type ngForm,

5:13

S… Speaker 1 (191. TD Submitting and Using the Form)

because that is what we're accessing here.

5:15

S… Speaker 1 (191. TD Submitting and Using the Form)

This automatically created form.

5:18

S… Speaker 1 (191. TD Submitting and Using the Form)

Now let's print it to the console one more time.

5:21

S… Speaker 1 (191. TD Submitting and Using the Form)

And let's actually enter something into these fields to see

5:25

S… Speaker 1 (191. TD Submitting and Using the Form)

that it worked.

5:26

S… Speaker 1 (191. TD Submitting and Using the Form)

If I now type submit here,

5:29

S… Speaker 1 (191. TD Submitting and Using the Form)

you see that now we get an ngForm object,

5:32

S… Speaker 1 (191. TD Submitting and Using the Form)

an object which we certainly didn't create.

5:35

S… Speaker 1 (191. TD Submitting and Using the Form)

And there we have a lot of properties.

5:38

S… Speaker 1 (191. TD Submitting and Using the Form)

We'll have a closer look at those later.

5:40

S… Speaker 1 (191. TD Submitting and Using the Form)

We also do have a value property.

5:43

S… Speaker 1 (191. TD Submitting and Using the Form)

And if we expand this,

5:44

S… Speaker 1 (191. TD Submitting and Using the Form)

we indeed see a couple of key value pairs here where

5:48

S… Speaker 1 (191. TD Submitting and Using the Form)

we have the names of the controls.

5:51

S… Speaker 1 (191. TD Submitting and Using the Form)

So the names we set up here on the name attribute

5:55

S… Speaker 1 (191. TD Submitting and Using the Form)

like username and email.

5:57

S… Speaker 1 (191. TD Submitting and Using the Form)

We find them here and then the values the user entered.

6:00

S… Speaker 1 (191. TD Submitting and Using the Form)

And this is how we can submit such a form and how we can

6:05

S… Speaker 1 (191. TD Submitting and Using the Form)

also get access to the form object created by Angular.

6:08

S… Speaker 1 (191. TD Submitting and Using the Form)

We also see that our setup of controls also

6:12

S… Speaker 1 (191. TD Submitting and Using the Form)

worked.

191. TD Submitting and Using the Form

Özet

Bu transkrip hakkında AI'ye sor