Angular Child Components with Reactive Forms
In this story, I will touch on how to use child components with Reactive Forms. Reading this article allows you to write testable and clear code with Reactive Forms.
What are Reactive Forms?
Based on the documentation
Reactive forms provide a model-driven approach to handling form inputs whose values change over time. This guide shows you how to create and update a basic form control, progress to using multiple controls in a group, validate form values, and create dynamic forms where you can add or remove controls at run time.
Why Are Reactive Forms Confusing Developers?
A lot of Angular developers, don’t know a way to split it into child components, so they are writing whole logic into a component. After a while, the component becomes unmanageable, non-testable, and nonreusable.
I have created an example for a simple company form.
Honestly, I am bored to write it. What will happen if I need address or employee controls in another form? Will I copy and paste?
Never repeat yourself..
Angular ControlContainer Class
Based on the documentation of Angular, the definition of it is;
A base class for directives that contain multiple registered instances of
NgControl. Only used by the forms module.
Moreover, we can use it to access controls and manage the main form which is chunked across components.
ViewProviders Property of Angular Component Decorator
Let's quickly move to the viewProviders property of Angular Component Decorator. The documentation defines it as;
Defines the set of injectable objects that are visible to its view DOM children
It is not commonly used but it will be our hero in this situation. The key point is that if we provide it in viewProviders section of the child component with SkipSelf decorator, we can reach the ControlContainer provided in the parent injector.
But we can make improvements to make StaticInjectorError more understandable which is thrown by Angular when the child component is not placed into a Reactive Form. Therefore, we can create a factory to make a null check and throw an error.
Finally, save it as parentFormGroupProvider in any shared utils file.
Crete Child Components
Now, we can quickly create an address-form and employee-form components to split our form into components.
So, we can use both of them wherever we need.
Employee Add Button and Value Renderer
There are two more different cases that we did not touch on yet. These are reaching formGroup in the ts file and manipulating it. To represent both of them we are going to create add-employee and form-value-renderer components.
To handle value changes observable of formGroup, I am going to use a pretty sweet library which is ng-observe.
After a while, we can rewrite the company form component to more clear.
Conclusion
The ability to split Reactive Form controls into child components provides more clear, readable, testable, and reusable components. Using it will take you further.
I hope it was useful. See you in another article.
