For my job, I had to do a reasonably large form, enough so to make me fear the business logic mixing with the form logic and sub-parts of the form. I wanted to have a strongly-typed, easy to use and @angular/forms -y way to extract sub-forms components from a large form. Much like we extract components to handle their own concerns. The (sub)form component would need to conform to the following requirements:

have a strongly typed model

model @angular/forms — compatible

— use existing abstraction for communication (the AbstractControl and the ControlValueAccessor ) to handle validation, status changes, etc.

In short, I wanted to have a component that could be used as a single control in a larger form AND be a form in its own right with multiple fields, validation, status changes. And all the while keeping the parent form happily unaware of implementation details and communicating via the AbstractControl API.

For example Address as a sub-form in a Person form and in an Order form. But the full form in a NewAddress form.

In the beginning, I was decorating my FormGroup -s and their constituent FormControl -s with types, like this: