200. TD Grouping Form Controls

Jul 21, 2026 02:12 · 3:30 · English · Whisper Turbo · 5 Talare

Den här utskriften går ut i 7 dagar. Uppgradering för permanent lagring →

Föreläsningsindex

0:02

S… Speaker 1 (200. TD Grouping Form Controls)

Our form has evolved quite a bit.

0:04

S… Speaker 5 (200. TD Grouping Form Controls)

Now let's say that on the value object we get when we submit

0:08

S… Speaker 5 (200. TD Grouping Form Controls)

the form, we want to group some things.

0:11

S… Speaker 2 (200. TD Grouping Form Controls)

For example,

0:12

S… Speaker 5 (200. TD Grouping Form Controls)

we want to group the secret and the question answer and the username and email

0:17

S… Speaker 5 (200. TD Grouping Form Controls)

to just have some structure in our object because for a very

0:21

S… Speaker 1 (200. TD Grouping Form Controls)

big form,

0:22

S… Speaker 5 (200. TD Grouping Form Controls)

we might want to have such a structure.

0:24

S… Speaker 5 (200. TD Grouping Form Controls)

This would also be nice if we could then validate

0:28

S… Speaker 4 (200. TD Grouping Form Controls)

the, well,

0:29

S… Speaker 1 (200. TD Grouping Form Controls)

validity,

0:30

S… Speaker 5 (200. TD Grouping Form Controls)

the status of our individual groups of inputs.

0:33

S… Speaker 5 (200. TD Grouping Form Controls)

Turns out that's easy to do with the template -driven approach.

0:36

S… Speaker 5 (200. TD Grouping Form Controls)

Here on our first group,

0:39

S… Speaker 5 (200. TD Grouping Form Controls)

username and email,

0:40

S… Speaker 5 (200. TD Grouping Form Controls)

I already have a wrapping div with the ID user data here.

0:44

S… Speaker 5 (200. TD Grouping Form Controls)

Now you can simply place another directive on it,

0:47

S… Speaker 5 (200. TD Grouping Form Controls)

the ng -model group directive,

0:50

S… Speaker 3 (200. TD Grouping Form Controls)

like this.

0:51

S… Speaker 5 (200. TD Grouping Form Controls)

And this will now group this into,

0:54

S… Speaker 1 (200. TD Grouping Form Controls)

well,

0:55

S… Speaker 1 (200. TD Grouping Form Controls)

you guessed it,

0:56

S… Speaker 1 (200. TD Grouping Form Controls)

a group of inputs.

0:57

S… Speaker 1 (200. TD Grouping Form Controls)

However,

0:57

S… Speaker 5 (200. TD Grouping Form Controls)

ngModelGroup needs to be set equal to

1:02

S… Speaker 2 (200. TD Grouping Form Controls)

a string.

1:02

S… Speaker 3 (200. TD Grouping Form Controls)

So for example,

1:04

S… Speaker 2 (200. TD Grouping Form Controls)

userData.

1:05

S… Speaker 5 (200. TD Grouping Form Controls)

This will be the key name for this group.

1:08

S… Speaker 5 (200. TD Grouping Form Controls)

So now if I save this with ngModelGroupEdit,

1:12

S… Speaker 5 (200. TD Grouping Form Controls)

if I enter value here and here,

1:16

S… Speaker 3 (200. TD Grouping Form Controls)

and hit submit,

1:17

S… Speaker 5 (200. TD Grouping Form Controls)

and we have a look at the value of the form,

1:19

S… Speaker 5 (200. TD Grouping Form Controls)

you now see that we have a user data field here,

1:23

S… Speaker 5 (200. TD Grouping Form Controls)

which holds another object where we now have email and username.

1:27

S… Speaker 5 (200. TD Grouping Form Controls)

Now, not only did we add this extra field in our

1:32

S… Speaker 5 (200. TD Grouping Form Controls)

value, we also now have a different setup

1:36

S… Speaker 1 (200. TD Grouping Form Controls)

here in controls.

1:37

S… Speaker 5 (200. TD Grouping Form Controls)

Here we also now have a user data control with all the properties

1:41

S… Speaker 5 (200. TD Grouping Form Controls)

you know on those controls,

1:44

S… Speaker 3 (200. TD Grouping Form Controls)

like valid and so on.

1:45

S… Speaker 5 (200. TD Grouping Form Controls)

So if we now simply inspect our HTML

1:50

S… Speaker 1 (200. TD Grouping Form Controls)

code,

1:51

S… Speaker 5 (200. TD Grouping Form Controls)

And this div with the ID user data,

1:53

S… Speaker 5 (200. TD Grouping Form Controls)

you see that there also we got the ngDirtyTouched and valid

1:57

S… Speaker 3 (200. TD Grouping Form Controls)

classes added.

1:58

S… Speaker 5 (200. TD Grouping Form Controls)

So you can now also check the validity of

2:03

S… Speaker 1 (200. TD Grouping Form Controls)

this overall code control here,

2:05

S… Speaker 3 (200. TD Grouping Form Controls)

for example,

2:05

S… Speaker 5 (200. TD Grouping Form Controls)

which might be a nice feature in your form.

2:08

S… Speaker 5 (200. TD Grouping Form Controls)

You can also get access to the JavaScript

2:13

S… Speaker 2 (200. TD Grouping Form Controls)

representation.

2:14

S… Speaker 5 (200. TD Grouping Form Controls)

by again adding a local reference to the element which holds the ngModelGroup

2:19

S… Speaker 2 (200. TD Grouping Form Controls)

directive.

2:20

S… Speaker 1 (200. TD Grouping Form Controls)

Here,

2:21

S… Speaker 5 (200. TD Grouping Form Controls)

for example, userData would be a fitting name.

2:24

S… Speaker 5 (200. TD Grouping Form Controls)

And then setting this equal to ng model group.

2:27

S… Speaker 5 (200. TD Grouping Form Controls)

So just like we did before with email,

2:30

S… Speaker 5 (200. TD Grouping Form Controls)

which was equal to ng model,

2:32

S… Speaker 5 (200. TD Grouping Form Controls)

I'm now setting this reference equal to ng model group to get access

2:36

S… Speaker 2 (200. TD Grouping Form Controls)

to this JavaScript object.

2:37

S… Speaker 5 (200. TD Grouping Form Controls)

And this would allow us to,

2:40

S… Speaker 2 (200. TD Grouping Form Controls)

for example,

2:41

S… Speaker 5 (200. TD Grouping Form Controls)

output a message if this whole group is not valid.

2:44

S… Speaker 5 (200. TD Grouping Form Controls)

So we could simply output a paragraph here,

2:47

S… Speaker 5 (200. TD Grouping Form Controls)

user data is invalid,

2:51

S… Speaker 1 (200. TD Grouping Form Controls)

which we add if

2:55

S… Speaker 2 (200. TD Grouping Form Controls)

user data,

2:56

S… Speaker 5 (200. TD Grouping Form Controls)

this is your local reference created here,

2:59

S… Speaker 5 (200. TD Grouping Form Controls)

if user data is not valid.

3:03

S… Speaker 5 (200. TD Grouping Form Controls)

And let's say it has been touched.

3:05

S… Speaker 5 (200. TD Grouping Form Controls)

So user data touched is true.

3:09

S… Speaker 3 (200. TD Grouping Form Controls)

With that,

3:10

S… Speaker 1 (200. TD Grouping Form Controls)

if this reloads,

3:12

S… Speaker 5 (200. TD Grouping Form Controls)

You see that we don't see any message,

3:14

S… Speaker 5 (200. TD Grouping Form Controls)

but as soon as I click into one of the fields and then leave it,

3:18

S… Speaker 5 (200. TD Grouping Form Controls)

you see user data is invalid was shown.

3:20

S… Speaker 5 (200. TD Grouping Form Controls)

So now you really got a very fine grain control over

3:24

S… Speaker 5 (200. TD Grouping Form Controls)

your form with all these tools.

Denna utskrift genererades av AI (automatisk taligenkänning). Kan innehålla fel — verifiera mot originalljudet för kritisk användning. Politik för AI

❤️ Älskar du STT.ai? Berätta för dina vänner!

Sammanfattning

Klicka på Summarize för att generera en AI sammanfattning av denna utskrift.

Fråga AI om detta Transcript

Fråga något om denna utskrift — AI kommer att hitta relevanta avsnitt och svar.

Skriv om en annan