232. Syncing HTML with the Form

Jul 22, 2026 00:53 · 3:52 · English · Whisper Turbo · 2 Relatori
Questa trascrizione scade in 8 giorni. Aggiornamento per l'immagazzinamento permanente →
Indice delle lezioni
Mostra solo
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.

Questa trascrizione è stata generata dall'AI (riconoscimento automatico del linguaggio). Può contenere errori Politica dell'IA

❤️ Ti piace STT.ai? Diccelo ai tuoi amici!
Sommario
Fare clic su Summarize per generare un riepilogo AI di questa trascrizione.
Riepilogando...
Chiedi all'AI Informazioni su questo trascrizione
Chiedere qualsiasi cosa su questa trascrizione L'AI troverà sezioni pertinenti e la risposta.
Trascrivine un altro