In this lecture, we are going to start working on the upload form by enabling reactive forms.
Technically, the upload form is simple.
We can accomplish this objective with template forms.
However, reactive forms are more common in angular apps.
It's likely you will encounter them in real world scenarios.
I want to give you every opportunity to practice with reactive forms to get started.
We're going to need to import the Reactive Forms module.
The upload component is declared under the video module.
We won't have access to angular reactive forms feature unless we import them into our module.
Open the video module file.
At the top of the file, import the reactive forms module from the angular slash forms package.
Next, add this module to the imports array.
We can start converting our form into a reactive form.
Switch over to the upload component class file.
There are a couple of classes we're going to need from the Angular slash forms package.
Import the following classes.
Form Control.
Form group validators.
With these three classes.
We should be good to go.
It's time for another exercise.
I want you to register the form.
This process will involve creating form controls, form groups, and validating the inputs the template
will need to be updated to.
There's one field you can ignore for the form.
In our form, we have a field for selecting a screenshots.
This part of the form can be left alone.
It's something we'll work on together in a future section.
For now, we are going to handle one field in our form.
Pause the video and good luck.
Welcome back.
Hopefully you were able to register the form with our components.
Let's walk through the solution together.
We will begin by declaring the form control and group in the component class below our properties.
Let's create a form control.
The name of the control will be called title.
Its value will be a new instance of the form control class.
The form control class has two arguments.
The first argument is a default value.
The initial value will be an empty string.
However, we want to update the title of the video to the name of the file.
This step is optional, but I think it would improve the user experience.
Scroll down to the store file function.
Before updating the next step property.
We're going to call the this dot title dot set value function.
The set value function is defined on the form control class.
This function will programmatically update a form controls value.
We don't always have to wait for the user to input a value.
Angular gives us the power of updating the input through our class.
This value will be reflected in the template.
We're going to set the value to the this dot file name property.
The name property will store the full name of the file.
We can take this solution a step further by removing the file extension.
Users may want to remove it from the title.
We should step in and help them shame the replace function.
I'm going to paste in a regular expression.
This regular expression will remove the file extension from a string.
If the regular expression finds a file extension.
We will replace it with an empty string.
Let's move on to validating this field.
We don't want users to submit a clip without a title.
Let's go back to the control definition for the title.
The second argument to the class is an array of validators inside this array.
Let's add the required and minimum length validators.
The minimum length validator will have a threshold of three characters.
Our control is ready.
Hey, everyone.
Since the release of Angular 14, this solution will give us trouble later down the line.
To resolve these issues, check out this alternative syntax for the second argument of the form control
class.
We can pass in an object and save an array of validators.
By default, Angular will allow form controls to have a no value in the future.
We are not going to allow the title to no.
We can disable this behavior by sending the non Nullarbor property to true.
But what about validators?
Validators can be applied to a control by adding a property called validators.
Through this property we can add an array of validators.
Be sure to update your code to this example before proceeding.
All right.
Back to the video.
In a moment it'll be wired to the template before we connect the controller with the input.
We should add a form group below the form control.
Create a property called upload form.
Its value will be a new instance of the form group class.
Next, we need to register our control with our group.
We have one control.
There are two fields, but we will ignore the screenshot field until we've talked about webassembly.
For now we're going to focus on the title field passing an object with a property called Title.
Its value will be the title control.
There isn't much else we need to do with the group.
There's one last thing I want to add to the class before moving on to the template.
We should define a function for handling the form submission at the bottom of the class to find a method
called upload file.
Inside this method, we will log a message.
We're logging a message to help us test the form submission in the later lecture.
This method will be updated to handle the file upload.
It's time to update the template.
Switch over to the upload template.
Search for the form element in the template.
It'll be below a comment that says form on this element.
We can bind the form to the group by binding a property called Form Group.
This property should be bound to the upload form object in our class.
Next, let's handle the form submission on the same element.
We can listen for the form submission with the Energy Submit directive.
If this event gets emitted, we'll run the upload file function.
Typically forms will refresh the page.
However, the Energy Submit directive will automatically prevent the default behavior.
We can move on to binding the control inside the form.
We can find the input for the title under a comment that says title.
On top of finding the input, an error message should be rendered below the input.
Luckily, we can skip all that.
The video module is importing the shared module, thus giving us access to the input component.
We created a few sections ago.
By planning ahead, we can reuse components, replace the input element with the app input component.
We're going to pass on two pieces of information to this component.
First, we will bind the control property to the title form control.
Second, we will set the placeholder property to the following value.
Enter title.
With the final property set.
We're finished with our form.
It's time to give it a test.
Refresh the page in the browser.
Let's drag a video onto the uploader.
Hopefully you should be presented with a form inside the title field.
The input has been pre-filled with the name of the file.
The extension has been excluded.
If we were to empty this field, that should trigger an error with our validator.
Lastly, we should be able to submit the form, open the console in the developer tools before submitting
the form.
Perfect.
We can move on to sending the file to Firebase when the user submits the form.
Let's handle the file upload in the next lecture.