In this lecture we are going to handle the form submission for the clip.
The form we've created will update a specific clip uploaded by a user.
We're going to do what we did last time will inform the user of the status of their submission.
By using alerts we are going to add additional data properties to the edit component to manage the alerts.
It's going to be similar to what we did with the login and registration forms.
Let's get started.
First, we need to turn the form into a reactive form.
It'll be easier to manage the form through controls and groups.
Open the edit component class file.
We can skip importing the reactive forms module.
The component is declared under the video module, which already imports this module.
These features are exposed to our components.
We can move on to binding the component to a group.
We're going to import three classes from the Angular Slash Forms package there the form control form
group and validators classes.
Next we can declare the form group and control.
In fact, the form for editing a song is the same form for editing a clip.
We can reuse the code we've written for that form.
For this form.
Open the upload component class file.
Search for the title control and the upload form group are going to copy these two properties.
Back in the edit component class file.
We will paste these properties into our class.
The upload form property will be renamed to edit form.
Not a necessary step, but we should keep our names relative to the action.
If another developer comes across our code, they may be confused by their property name.
Unlike the upload form, the edit form is going to need the ID.
Let's create a control for storing the ID above the title control.
Create a property called Clip ID.
Its value will be a new instance of the form control class with an initial value of an empty string.
Hey, everyone.
I'm quickly jumping in to inform you of an issue with this solution.
Since the release of Angular 14, typing four forms have become stricter by default.
Angular allows form controls to have null values.
For our case, our fields should not know as a valid value.
As we learned with the upload component, we can disable this behavior by passing in an object as the
second argument.
In this object we can set the non Nullarbor property to true.
Validators can be applied through the validators array.
Update your form controls to this new example.
Once you got that done, let's head back to the video.
Both controls should be updated with the data from the active clip property.
There's just one problem.
Angular manages to update the property.
But what if we want to be notified of changes to the components input properties?
Unfortunately, we aren't informed of the changes to our components properties.
Luckily, components have a lifecycle function to watch for changes at the top of the file.
We're going to import an interface called On Changes.
The On Changes interface will force our component to define a method called energy on changes.
This method will be called whenever a component's properties are updated by a parent component.
We can use this method to update our form controls when the active clip property is modified.
Let's implement this interface on the component class.
Next, define the N.G. on changes function.
Inside this function, we're going to create a conditional statement for checking if the active clip
property is empty.
If it is, we'll return the function.
It's possible the active clip property may be empty.
If it is, we should avoid updating the form controls after the conditional statements.
We can proceed to update the properties.
We've learned how to update values from JavaScript.
Form controls expose a method called set value.
To update a form controls value.
We'll call this method on both controls.
They'll be set to their respective values from the active clip object.
We won't be able to check if the fields get updated on the page until we've bound them to our form group.
Let's start editing the template.
Open the component template file.
Starting with the form element, we will bind the form group property to the edit form property.
As for the input, we can replace it with the app input component.
The control can be passed down to the component by binding the control property to the title property.
Another property we will add is the placeholder property.
The value for this property will be the following.
Enter title.
Our form is now bound to the group.
We've made a lot of changes.
Let's give our app a test.
Refresh the manage page in the browser.
Clicking on the edit button will toggle the model's appearance.
If we look closely at the title, it's been updated with the title from the clip object.
If we open a different clip, the title should be updated with the corresponding clips values.
Perfect.
We've got a dynamic form.
In the next lecture, we're going to finish the forum by submitting the data.