This past week I implemented a pattern I’ve been pondering for almost a year now. I like to create rather modular and granular code such that if my data structures are nested, the components that represent them on the screen should be nested as well. The question becomes, how does one create a reactive form in a child component and attach that form to the parent form in a way that:
- Leaves the definition of the child form entirely in the child
- Leaves the processing of the data in the parent where the parent form is the “Smart Component” and the child is a “Dumb Component”
Most solutions I was able to find attack this problem assuming the child component will be part of an array of controls. And I suppose, if you wanted to, you could implement that pattern using an array with one element. But, that just felt like a hack. If you are interested in that solution, this is the wrong article.