In this lecture, we are going to bind the form control to the input component, the input component
needs a form control for checking errors.
The template doesn't have access to the group anymore.
It's been moved to a different component.
Luckily, it's perfectly valid to pass down the controller through inputs.
Open the input component class file.
We will need to update the angular slash core package to include the input decorator function.
Next, inside the class, we will create a property called control with the input decorator.
They it for this property will be form control.
The form control class should have been imported after adding this type, if not added in manually.
The class can be found under the Angular Forms package.
Lastly, we will initialize this property to a new instance of the form control class.
The compiler will complain if we don't initialize our properties.
The value for this property will be overridden by the input decorator.
It's not going to be a huge issue.
In most cases, we will be sending a form control from the parent component.
We won't have to worry about working with an empty form control.
Let's pass down a control to this component from the register component.
Open the register component template file.
Search for the input component.
We added one below the label for the name.
We will bind the control property to the register form Dot Control's dot name object.
After doing so, an error appears there's a red line below the binding of the control property.
If we hover over this property, the error will tell us the following type abstract control is missing
the following properties from Typeform control.
It's a strange error.
The error is telling us we're sending the wrong object to the component.
The input component expects the object to be an instance of the form control class.
Instead, we're passing down an object that's an instance of the abstract control class.
Let me show you the problem with a diagram.
Register form, dot controls, dot name property holds an object, the type of the object is abstract
control.
The control input wants an object with the type of form control.
We are sending the wrong type of data to the component.
The question is why?
To find out why.
Let's open the register component class file.
Inside this class, we all add the constructor function.
Inside the constructor function, we will type out the register form, dot controls, dot name property.
We aren't going to lock the property.
We simply want to type it out if we hover our mouse over the main property.
The editor will tell us this property is an instance of the abstract control class.
Really bizarre, right?
In the form group, we are creating instances of the form control class.
Therefore, they should be an instance of the form control class.
So why is the compiler inferring a different type?
The culprit has to do with the form group class.
It's changing the type after creating a new instance of the Form Group class.
Check this out Hover your mouse over the new instance of the Form Group class, hold down control on
your keyboard.
Next, click on this class.
Our editors will open a TypeScript declaration file, as you already know, TypeScript enables developers
to create custom types.
Creating a type can clutter files.
Most developers prefer to outsource custom types to separate files.
A typed definition file is a file exclusively for custom types.
They don't contain real business logic.
Most definition files end with the d.a.'s extension.
A declaration file provides information about the classes we're using by clicking on the Form Group
class.
We will be taken to the constructor function.
Make sure you clicked on the new instance of the Form Group class.
Otherwise, you may be taken elsewhere in the file.
We're going to focus strictly on the constructor function.
Specifically, we want to focus on the first argument.
The first argument is an object called controls.
This argument expects an object of form controls.
We're already doing that in our components, looking closely.
Each property in the object will be annotated with the abstract control class.
Here's our problem.
Angular is changing the type when a new instance of the form group class is created.
It's perfectly valid to perform this type of action.
Remember, when we read the documentation for the abstract control class, the documentation stated
the form control class is a subclass of the abstract control class.
TypeScript will allow Angular to perform this change.
There are various solutions we can implement to help the compiler understand.
We're sending an instance of the form control class.
We can assert the type of data type in the input component or move the properties around.
I think the simplest solution is to move the properties around.
Let me show you what that looks like.
Go back to the register component class inside the object passed into the form group class.
We will cut everything inside.
These properties will be moved outside the new instance.
Instead, they will be properties of the register component class.
We will need to change the commas into assignment operators, a.k.a. equal sign symbols.
At the end of each line, remove the commas.
Lastly, we will add the controls back inside the form group class through the this keyword.
We don't need to directly create the controls inside the object, we pass into the form group class.
They can be created outside and then passed in our forms will continue to work by separating them.
We can pass our form controls directly to the input component instead of through the Register Form Group.
Before we do, let's verify TypeScript can infer it the correct type inside the constructor function.
We all change the line to this sort name.
This time, TypeScript thinks the type of the name property is form control.
Perfect.
Let's remove the constructor function.
We don't need it anymore.
Go back to the register component template.
Instead of binding the control property on the input component to register form dot controls dot name,
we can bind it to the name property.
After updating the binding, the error goes away, TypeScript is happy, we're almost finished designing
the input component.
We will need to update the template to start using our binding.
We will tackle this step in the next lecture.