Using Angular2 best practices, I'm wondering what the recommended solution is to the following scenario:
I have a form component, which itself is composed of many child components. Sometimes the component-tree is multiple levels deep (e.g.: top-level form component -> birth information component -> birthDate component.) When loaded, the form needs to be pre-populated with existing data. Many of the input fields have validators on them. The data comes from a restful service (using @angular/Http + RXJS).
When I first started the project, I read about how in Angular 2 (and really, even 1.5) encourages data to flow down and events, up. At the time, the top-level component was pulling in the data that I needed for pre-population. So obviously, I said "Aha! Data, down; events, up.... I have the data at the top, so I'll just construct the form using a form-builder at the top level component and pass down the formControl/formGroup object to the child components.
Now that I've thought more in-depth about it, there are clearly different options on how to properly construct this form. Below I've listed the 3 I can easily think of. I'm wondering which of these is the recommended approach. Feel free to add other design options I haven't listed or comment if the question is 100% situational.
- Construct the FormGroup at the top-level component and down the proper FormControls/AbstractControls to each of the child components.
- Pro(s): 1) Clear source for where the data is coming from. 2) Questions like validity/pristineness of the form as a whole are easy to check by just looking at the top-level formControl.
- Con(s): 1) The child components cannot be exported/used on their own. They only make sense/can be pre-populated in the context of their parent, which pulls in the data from a restful service. 2) The source-code for constructing the top level component is really big.
-
Still pull the data in at the top-level component, but construct the controls at the child components.
- Pro(s): 1) Clear source for where the data is coming from. 2) Model-driven validation rules can move the the child components.
- Con(s): 1) The child components cannot be exported/used on their own. They only make sense/can be pre-populated in the context of their parent, which pulls in the data from a restful service.
-
Have each child component subscribe to the results from a top-level restful service call and each child constructs their own formControl/component when onNext/onComplete fires for of that subscription.
- Pro(s): 1) The child components can be exported/used on their own. 2) The source-code for constructing the top-level component is now MUUUUCH smaller - it has been delegated to its children.
- Con(s): 1) No clean source for where the daa is coming from.
As context for my specific situation, the controller for the current top-level component is ~600 lines of code right now. This is mostly due to constructing the FormGroup with all the validations, etc. at the top level.
Thanks very much for your thoughts!!!
Aucun commentaire:
Enregistrer un commentaire