198. TD Set Default Values with ngModel Property Binding

Jul 21, 2026 02:09 · 2:16 · English · Whisper Turbo · 2 Oradores
Esta transcrição expira em 7 dias. Atualização para armazenamento permanente →
Índice de Lecções
A mostrar apenas
0:02
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
Thus far,
0:03
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
we learned a lot about the template -driven approach and how we can create great forms with
0:07
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
it. Now let's move on,
0:08
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
let's leave the world of validating user input here.
0:11
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
And let's say we want to define some default
0:16
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
values which should be displayed.
0:17
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
For example,
0:18
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
on the dropdown here,
0:20
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
right now it's empty by default.
0:22
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
Well, it would be nice if one of the two questions would be selected,
0:25
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
right? For this,
0:27
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
we can change the way we add ng -model.
0:30
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
Right now we add it like this without property or event binding,
0:34
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
no two -way data binding.
0:35
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
Well,
0:36
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
we can use it together with property binding.
0:40
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
So let's add some square brackets around it.
0:42
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
No parentheses.
0:44
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
So we're not using two -way binding as of now.
0:46
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
And now we can bind it to a value.
0:49
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
And remember with it,
0:51
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
I mean the control.
0:53
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
this input here,
0:54
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
which is turned into a control by Angular in the background.
0:57
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
So this select here can now be bound to a default
1:02
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
value.
1:02
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
And you could either hard code a string into there,
1:06
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
don't forget the single quotation marks in this case,
1:09
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
or you set up a property,
1:11
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
like let's say default question,
1:14
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
which would be pet.
1:17
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
pet because that is one of the two valid values,
1:20
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
the other one being teacher for this question here.
1:23
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
So now we can bind this to default question.
1:26
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
And if we now save this and let it reload,
1:30
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
you see that now pet is selected.
1:32
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
And of course,
1:33
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
if we switch this to teacher,
1:36
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
well,
1:36
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
it shouldn't be a surprise that the other value is selected.
1:40
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
So now all of a sudden we're using a default value.
1:44
S… Speaker 2 (198. TD Set Default Values with ngModel Property Binding)
And of course,
1:44
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
this does not only work for the dropdown,
1:46
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
it would also work for the username.
1:48
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
You could point to a default string there,
1:51
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
pre -populating this field with a default username.
1:54
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
Very useful and something you should definitely keep in mind that you
1:58
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
are not limited to using ng -model without any bindings.
2:02
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
You can use one -way binding,
2:04
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
property binding,
2:05
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
to set a default value.
2:07
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
Of course,
2:08
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
this value can still be overwritten.
2:10
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
You can still pick a different option here.

Essa transcrição foi gerada pela IA (reconhecimento automático de fala). Pode conter erros — verificar contra o áudio original para uso crítico. Política de IA

❤️ Adora o STT.ai? Conte aos seus amigos!
Resumo
Clique em Summarize para gerar um resumo de IA desta transcrição.
Resumindo...
Pergunte à IA sobre este Transcrito
Pergunte qualquer coisa sobre esta transcrição — a IA vai encontrar seções relevantes e resposta.
Transcrição Outro