199. TD Using ngModel with Two-Way-Binding

Jul 21, 2026 02:11 · 2:48 · English · Whisper Turbo · 2 Intervenants

Le présent compte rendu arrive à expiration. 7 jours. Mise à niveau pour le stockage permanent →

Index des conférences

0:02

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

Sometimes,

0:03

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

you not only want to pre -populate the default the user entered,

0:06

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

but you also want to instantly react to any changes.

0:10

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

Right now,

0:12

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

everything about this form here only updates once I click submit.

0:16

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

Then I get this form object where I can retrieve the value.

0:19

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

We don't use two -way binding,

0:21

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

ng -model is either used without any binding or with one -way

0:25

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

binding.

0:26

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

but sometimes you instantly want to check something or simply

0:30

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

repeat whatever the user entered.

0:32

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

Let's show an example.

0:34

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

For this question here,

0:36

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

I'm going to add a new form group,

0:39

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

bootstrap style here,

0:40

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

below the dropdown.

0:42

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

I want to have a text area,

0:44

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

let's say, to also introduce a new input.

0:47

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

Let's name it question answer.

0:54

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

Don't need the ID here.

0:55

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

Don't need columns.

0:56

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

I want to have three rows let's say and I'll also distribute

1:01

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

this over multiple lines and now we could add ng -model to get

1:05

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

access to whatever the user entered as a reply.

1:08

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

But maybe for some reason we instantly want

1:12

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

to repeat this reply.

1:14

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

So below this we could say your reply and

1:18

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

now we want to output the answer to the question.

1:23

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

Well, for this,

1:24

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

we could still use two -way binding on ng -model here

1:28

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

and bind it to the answer property here.

1:31

S… Speaker 2 (199. TD Using ngModel with Two-Way-Binding)

Of course,

1:32

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

we need to introduce this answer property then there.

1:35

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

An answer could be an empty string by default.

1:37

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

With this in place,

1:39

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

let me also add a CSS class to the text

1:43

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

area form control to give it some nice styling.

1:46

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

If this reloads,

1:48

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

we see our text area here.

1:51

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

And if I enter valid data here for my first pet,

1:55

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

let's say, a rabbit named Nelly,

1:57

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

you instantly see that here.

1:59

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

So you can still use two -way binding.

2:02

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

And actually,

2:03

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

if I submit the whole form and open up the developer tools,

2:08

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

You see in the value object,

2:10

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

this is still part of this value object.

2:14

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

It just is updated with every keystroke.

2:17

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

But of course,

2:18

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

if we submit it,

2:19

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

we will get a snapshot of the value at a point of time we hit

2:23

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

submit.

2:23

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

So two -way binding is still possible.

2:26

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

You can still use ng -model with two -way binding.

2:29

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

And with that,

2:30

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

you saw all three forms.

2:32

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

No binding to just tell Angular that the input is a control.

2:36

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

one -way binding to give that control a default value,

2:40

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

and two -way binding to instantly output it or do whatever you want

2:44

S… Speaker 1 (199. TD Using ngModel with Two-Way-Binding)

to do with that value.

Cette transcription a été générée par l'IA (reconnaissance automatique de la parole). Peut contenir des erreurs — vérifier par rapport à l'audio original pour une utilisation critique. Politique de l'IA

❤️ Vous aimez STT.ai ? Parlez-en à vos amis !

Résumé

Cliquez sur Résumer pour générer un résumé AI de cette transcription.

Demandez à l'IA à propos de cette transcription

Demandez quoi que ce soit au sujet de cette transcription — l'IA trouvera des sections pertinentes et des réponses.

Transcription d'un autre