27 lines
2.0 KiB
Markdown
27 lines
2.0 KiB
Markdown
# Nested Forms - An exploration of alternatives
|
|
|
|
The official Angular documentation discussing [Reactive Forms](https://angular.io/guide/reactive-forms) shows how one can use groups and arrays to organize a form, and to dynamically add to it. The drawback of the example on that page is that everything is in a single component.
|
|
|
|
Once a component starts to grow in size and complexity, it becomes desirable to decompose it into multiple smaller components. At this point, there are a number of ways to break up the form into a set of nested form elements.
|
|
|
|
# Project Purpose
|
|
|
|
This project explores several approaches to implementing nested forms/components. The project is structured using the [Nrwl Nx](https://nx.dev/) monorepository framework, with shared models and services in a library, and separate applications to explore each approach.
|
|
|
|
Each application implements a simple contact management form, capturing simple demographics information and a list of postal addresses.
|
|
|
|
## Base Line - The Single component
|
|
|
|
The [Base Line](apps/baseline) application implements the contact manangement form in a single angular component, directly using the example techniques from the [Reactive Forms](https://angular.io/guide/reactive-forms) documentation.
|
|
|
|
## Components Creating Own Form Controls
|
|
|
|
When searching the Internet for examples of nested forms in Angular, one popular approach is to have each sub-component be responsible for creating its own form controls. The parent form is passed in as an `@Input`, and the component adds its components to the form using the `addControl(name, control)` method.
|
|
|
|
The [Parent Form](apps/parent-form) application explores this approach.
|
|
|
|
## Parent Component Creates Form and Passes Form Controls Into Child Components
|
|
|
|
Another approach is to allow the outermost, or parent, component create the full Reactive Form. Each child component is given the `FormGroup` containing the portion of the form that it is responsible for rendering.
|
|
|
|
The [Global Form](apps/global-form) application explores this approach. |