232. Syncing HTML with the Form

Jul 22, 2026 00:53 · 3:52 · English · Whisper Turbo · 2 Oradores
Esta transcripción expira en 8 días. Actualizar para el almacenamiento permanente →
Índice de conferencias
Mostrar sólo
0:02
S… Speaker 1 (232. Syncing HTML with the Form)
So,
0:02
S… Speaker 2 (232. Syncing HTML with the Form)
we created our form,
0:04
S… Speaker 2 (232. Syncing HTML with the Form)
let's now synchronize it to the HTML code.
0:07
S… Speaker 1 (232. Syncing HTML with the Form)
For this,
0:08
S… Speaker 1 (232. Syncing HTML with the Form)
first of all,
0:09
S… Speaker 2 (232. Syncing HTML with the Form)
and that's very important,
0:10
S… Speaker 2 (232. Syncing HTML with the Form)
we need to add something to the app module.
0:13
S… Speaker 2 (232. Syncing HTML with the Form)
In the imports array,
0:15
S… Speaker 2 (232. Syncing HTML with the Form)
we now not only need the forms module,
0:18
S… Speaker 2 (232. Syncing HTML with the Form)
we'll also need the reactive forms module,
0:22
S… Speaker 2 (232. Syncing HTML with the Form)
which needs to be imported from at Angular forms.
0:25
S… Speaker 1 (232. Syncing HTML with the Form)
Otherwise,
0:27
S… Speaker 2 (232. Syncing HTML with the Form)
synchronizing with our HTML code will fail,
0:31
S… Speaker 2 (232. Syncing HTML with the Form)
because we don't have access to the directives we need for that.
0:34
S… Speaker 2 (232. Syncing HTML with the Form)
So therefore,
0:36
S… Speaker 2 (232. Syncing HTML with the Form)
what I'll do is go to my recipe edit component HTML file,
0:40
S… Speaker 2 (232. Syncing HTML with the Form)
and now I want to connect my form.
0:44
S… Speaker 2 (232. Syncing HTML with the Form)
Let's start on the overall form element.
0:46
S… Speaker 2 (232. Syncing HTML with the Form)
Here we have the form group directive
0:51
S… Speaker 2 (232. Syncing HTML with the Form)
which we should use with squared brackets because we need to
0:55
S… Speaker 2 (232. Syncing HTML with the Form)
pass some data to that directive via property binding and
0:59
S… Speaker 2 (232. Syncing HTML with the Form)
that data is our recipe form.
1:01
S… Speaker 2 (232. Syncing HTML with the Form)
So let's quickly assign this.
1:03
S… Speaker 2 (232. Syncing HTML with the Form)
Now we're telling Angular that our overall form is
1:07
S… Speaker 2 (232. Syncing HTML with the Form)
managed by us and that Angular itself should not manage it.
1:11
S… Speaker 2 (232. Syncing HTML with the Form)
Instead it should take our form.
1:14
S… Speaker 2 (232. Syncing HTML with the Form)
With this,
1:15
S… Speaker 2 (232. Syncing HTML with the Form)
we can now assign our own controls.
1:18
S… Speaker 2 (232. Syncing HTML with the Form)
So let's simply go to a first
1:22
S… Speaker 2 (232. Syncing HTML with the Form)
input, the name here,
1:23
S… Speaker 2 (232. Syncing HTML with the Form)
and there we have the form control name directive.
1:26
S… Speaker 2 (232. Syncing HTML with the Form)
Now we could enclose it in square brackets and then use
1:30
S… Speaker 2 (232. Syncing HTML with the Form)
single quotation marks between the double quotation marks.
1:34
S… Speaker 2 (232. Syncing HTML with the Form)
Or we omit both and simply use this syntax.
1:37
S… Speaker 2 (232. Syncing HTML with the Form)
And now the name here,
1:39
S… Speaker 2 (232. Syncing HTML with the Form)
of course,
1:39
S… Speaker 2 (232. Syncing HTML with the Form)
has to match the name we set up here.
1:42
S… Speaker 2 (232. Syncing HTML with the Form)
So here we chose name.
1:44
S… Speaker 2 (232. Syncing HTML with the Form)
We should choose the same in the HTML code.
1:46
S… Speaker 2 (232. Syncing HTML with the Form)
Now we'll copy this also for the
1:51
S… Speaker 2 (232. Syncing HTML with the Form)
image URL.
1:52
S… Speaker 2 (232. Syncing HTML with the Form)
Here I chose image path as a name.
1:55
S… Speaker 2 (232. Syncing HTML with the Form)
So let's make sure to use this.
1:58
S… Speaker 2 (232. Syncing HTML with the Form)
And of course,
1:59
S… Speaker 2 (232. Syncing HTML with the Form)
description for our text area here.
2:03
S… Speaker 2 (232. Syncing HTML with the Form)
Here I also will add the form group name directive and
2:07
S… Speaker 2 (232. Syncing HTML with the Form)
assign description.
2:08
S… Speaker 2 (232. Syncing HTML with the Form)
Now to be able to see something,
2:11
S… Speaker 2 (232. Syncing HTML with the Form)
I'll also set up the ngSubmitListener and listen to
2:15
S… Speaker 2 (232. Syncing HTML with the Form)
onSubmit.
2:16
S… Speaker 2 (232. Syncing HTML with the Form)
Now here of course I don't need to pass the form as an argument.
2:20
S… Speaker 2 (232. Syncing HTML with the Form)
Instead I can simply add the onSubmit
2:24
S… Speaker 2 (232. Syncing HTML with the Form)
method here.
2:26
S… Speaker 2 (232. Syncing HTML with the Form)
And for now,
2:27
S… Speaker 2 (232. Syncing HTML with the Form)
simply log my recipe form to the console.
2:30
S… Speaker 2 (232. Syncing HTML with the Form)
Let's see if everything works as it should.
2:33
S… Speaker 2 (232. Syncing HTML with the Form)
So once this has recompiled,
2:36
S… Speaker 1 (232. Syncing HTML with the Form)
I'll head over to the form.
2:38
S… Speaker 2 (232. Syncing HTML with the Form)
And this looks okay.
2:41
S… Speaker 2 (232. Syncing HTML with the Form)
It almost works as expected.
2:45
S… Speaker 2 (232. Syncing HTML with the Form)
The name was pre -populated for the selected recipe.
2:49
S… Speaker 2 (232. Syncing HTML with the Form)
And it does update if we change
2:53
S… Speaker 2 (232. Syncing HTML with the Form)
this to Big Fat Burger.
2:55
S… Speaker 2 (232. Syncing HTML with the Form)
The description is not displayed though.
2:58
S… Speaker 2 (232. Syncing HTML with the Form)
So that is not how I want this to behave.
3:02
S… Speaker 2 (232. Syncing HTML with the Form)
As a side note,
3:03
S… Speaker 2 (232. Syncing HTML with the Form)
on new recipe,
3:04
S… Speaker 2 (232. Syncing HTML with the Form)
it correctly sets this to an empty form.
3:06
S… Speaker 2 (232. Syncing HTML with the Form)
So that is okay.
3:07
S… Speaker 2 (232. Syncing HTML with the Form)
But would be nice if the description is displayed too.
3:11
S… Speaker 2 (232. Syncing HTML with the Form)
If I submit the form,
3:13
S… Speaker 2 (232. Syncing HTML with the Form)
let's have a look at the value,
3:15
S… Speaker 1 (232. Syncing HTML with the Form)
description.
3:17
S… Speaker 2 (232. Syncing HTML with the Form)
Actually,
3:18
S… Speaker 2 (232. Syncing HTML with the Form)
it says what else you need to say.
3:20
S… Speaker 2 (232. Syncing HTML with the Form)
So what could be wrong about the description then?
3:24
S… Speaker 1 (232. Syncing HTML with the Form)
Well,
3:24
S… Speaker 2 (232. Syncing HTML with the Form)
if we have a look at the text area,
3:26
S… Speaker 2 (232. Syncing HTML with the Form)
I simply assigned the wrong directive.
3:28
S… Speaker 2 (232. Syncing HTML with the Form)
It should be form control name.
3:30
S… Speaker 2 (232. Syncing HTML with the Form)
With this in place,
3:31
S… Speaker 2 (232. Syncing HTML with the Form)
if it reloads,
3:32
S… Speaker 2 (232. Syncing HTML with the Form)
this looks much better.
3:33
S… Speaker 2 (232. Syncing HTML with the Form)
So with that,
3:35
S… Speaker 2 (232. Syncing HTML with the Form)
the synchronization is working.
3:38
S… Speaker 2 (232. Syncing HTML with the Form)
The next step is to get our ingredients
3:42
S… Speaker 2 (232. Syncing HTML with the Form)
to work correctly.
3:43
S… Speaker 2 (232. Syncing HTML with the Form)
And that actually will involve a couple of steps because we need to manage this
3:48
S… Speaker 2 (232. Syncing HTML with the Form)
array of ingredients for that.

Esta transcripción fue generada por AI (reconocimiento automático del habla). Puede contener errores — verificar contra el audio original para uso crítico. Política de IA

❤️ ¿Te encanta STT.ai? ¡Cuéntale a tus amigos!
Resumen
Haga clic en Resumen para generar un resumen de IA de esta transcripción.
Resumiendo...
Pregúntele a AI acerca de esta transcripción
Pregunte cualquier cosa acerca de esta transcripción: la IA encontrará secciones relevantes y responderá.
Transcribir otro