Scalable form architecture with reusable parts
As mentioned in the introduction to the Multi-step responsive forms section, forms are tightly coupled beasts that can grow large, and using the wrong architectural pattern to scale your implementation can cause significant issues when implementing new features or maintaining existing ones.
To demonstrate how you can break up your form into multiple parts, we will refactor it to extract the highlighted section in the following screenshot, the name FormGroup, as its own component. The technique to accomplish this is the same as you’d use when you want to put each step of your form into a separate component:
Figure 8.9: User profile’s name part highlighted
By making the name FormGroup reusable, you will also learn about how you can reuse the business logic that you build into that FormGroup in other forms. We will extract the name FormGroup logic into a new component named NameInputComponent. In doing so,...
