193. TD Accessing the Form with @ViewChild

Jul 21, 2026 02:02 · 3:03 · English · Whisper Turbo · 2 Овозли эшиттиришлар

Бу транскрипт муддати тугайди 7 кунлар. Доимий сақлаш учун янгилаш →

Ўқиш индекси

0:02

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

In the last lectures,

0:03

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

we learned how we can register controls and how we can submit

0:07

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

the form and also which properties this form has.

0:10

S… Speaker 2 (193. TD Accessing the Form with @ViewChild)

Now,

0:11

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

right now,

0:12

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

we submit the form by passing the form,

0:15

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

which we get via ngForm here,

0:17

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

to the onSubmit method.

0:18

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

This is absolutely fine and probably the approach you will use in many

0:23

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

use cases.

0:23

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

I just want to bring some other approach to your attention.

0:28

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

You don't have to submit it here.

0:29

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

Remember the component section where we learned about at

0:34

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

viewchild which allowed us to access a local

0:38

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

reference,

0:38

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

an element controlled or which holds a local reference in

0:43

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

our TypeScript code?

0:45

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

Well in the end we do just have such a local reference here and

0:49

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

whilst it might not point to element ref but to the

0:53

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

ng form object It still is a local reference in our template

0:57

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

so we can also use at view child here So I will

1:01

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

simply comment out this on submit method here so

1:06

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

that we have it in the code you can find attached to this module and

1:10

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

Show you an alternative approach

1:12

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

In this alternative approach,

1:14

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

I will use addViewChild,

1:16

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

this decorator you learned about in the component section.

1:20

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

So make sure to import it from addAngularCore.

1:23

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

And I want to get access to the element which has

1:27

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

the local reference F on it.

1:29

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

So I pass F as a string as an argument to ViewChild.

1:33

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

And then I could simply store this in a variable named signup form,

1:38

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

any name you like,

1:39

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

which will be of type ng form,

1:41

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

of course.

1:41

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

Now in on submit,

1:43

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

I could output this signup form like

1:47

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

this.

1:48

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

And you should see that if I now submit this

1:52

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

again, we still have this form.

1:54

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

And I can also enter something so that we can see that this works too if we have a look

1:58

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

at the value.

1:59

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

So this gives us access to the very same forum without passing it

2:03

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

to onSubmit.

2:04

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

This is especially useful if you need to access the forum not

2:08

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

just at the point of time when you submit it,

2:10

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

but also earlier.

2:12

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

And I will show you a use case for this in a later lecture.

2:16

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

For now,

2:17

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

let's keep in mind that this is another way of getting access to the forum in our TypeScript

2:22

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

code, a perfectly valid way of getting access.

2:25

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

And before diving deeper into why this might be useful or when we could use that,

2:29

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

let's actually understand how we can control the

2:33

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

validity of the form.

2:34

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

So to determine whether the form is valid,

2:37

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

if we entered a valid email address here or not,

2:40

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

because right now I can submit anything,

2:41

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

no matter if this is invalid,

2:43

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

if this is empty.

2:44

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

It would be nice if you could add such validation and take advantage of

2:49

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

the tools Angular gives us there to possibly also enhance the user

2:53

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

experience by placing a red border around invalid elements or

2:57

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

something like this.

2:58

S… Speaker 1 (193. TD Accessing the Form with @ViewChild)

We'll have a look at validation in the next lectures.

Бу транскрипт AI (автомат сўзлашувни таниб олиш) томонидан яратилган. Хатолар бўлиши мумкин - муҳим фойдаланиш учун оригинал аудио билан текширинг. AI сиёсати

❤️ STT.aiни севасанми? Дўстларингга айт!

Тақриз

Ушбу транскриптнинг AI резюмесини яратиш учун "Тафсиллаш" тугмасини босинг.

Бу транскрипт ҳақида AIдан сўранг

Ушбу транскрипт ҳақида бирор нарса сўранг — AI тегишли қисмларни топиб жавоб беради.

Бошқасини кўчириш