Member-only story

The Best Way to build reactive sub-forms with Angular

Tomas Trajan
11 min readJan 21, 2020

Original 📸 by Zdeněk Macháček

In this article we’re going to explore various approaches how to implement reactive sub-forms and discuss their trade-offs. At the end you will be able to make informed decision based on the particular use case to deliver best possible experience for your users and great developer experience for your colleagues!

Forms represent one of the most important parts of almost all frontend applications. From a single input field to a multi step wizards, forms enable dialog with the users by providing them with a way to submit many different kinds of data!

When developing Angular application, we will rarely end up with just a single form. It is much more common to implement many different forms for the individual features based on user requirements.

It is quite usual that some of the forms (or their parts) will feel repetitive as we keep re-implementing them over and over again!

An Example

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

Tomas Trajan
Tomas Trajan

Written by Tomas Trajan

👋 I build, teach, write & speak about #Angular & #NgRx for enterprises 👨‍💻 Google Developer Expert #GDE 👨‍🏫 @AngularZurich meetup co-organizer

Responses (18)

Write a response

Hoi Tomas, as usual very good easy to understand and complete!
Would you also add a method to set values if the sub fom contains form arrays? Or how would you do that?

7

Hi Tomas,
I don't really see why you're saying that CVA should be only used for single inputs/widgets. That's your preference, but CVAs can solve most of the problems with nested forms and imho they're actually better than your favorite approach :)…

4

Very clean and interesting implementation, thanks. Though, I had to move the child form group creation into the child constructor (AddressFormComponent) and then createGroup becomes a getGroup returning the group form instantiation to the parent. I…

2