Go to file
Kevin C. Coram e8034ac8be
Add summary of static method approach to main README
2020-01-08 22:10:05 -05:00
.vscode initial commit 2019-08-28 00:25:11 -04:00
apps Document static method approach 2020-01-08 22:05:50 -05:00
libs Refactor createForm() to provide composible factory methods 2019-12-31 13:49:46 -08:00
tools initial commit 2019-08-28 00:25:11 -04:00
.editorconfig initial commit 2019-08-28 00:25:11 -04:00
.gitignore initial commit 2019-08-28 00:25:11 -04:00
.prettierignore initial commit 2019-08-28 00:25:11 -04:00
.prettierrc Configure prettier to use trailing commas 2019-09-04 23:20:44 -04:00
LICENSE Add MIT License file 2019-09-07 21:47:32 -04:00
README.md Add summary of static method approach to main README 2020-01-08 22:10:05 -05:00
README_NX.md Rename generated README file 2019-09-07 18:30:17 -04:00
angular.json Add fourth approach: Static methods on child components 2020-01-04 09:42:53 -05:00
jest.config.js Use Nrwl jest resolver plugin 2019-09-04 22:11:00 -04:00
nx.json Add fourth approach: Static methods on child components 2020-01-04 09:42:53 -05:00
package-lock.json Additional Jest configuration and dependencies 2019-08-28 00:25:23 -04:00
package.json Additional Jest configuration and dependencies 2019-08-28 00:25:23 -04:00
tsconfig.json Refactor rename lib/contact-model -> lib/contact 2019-09-04 21:36:09 -04:00
tslint.json nx g @nrwl/angular:app parent-form 2019-08-28 00:25:22 -04:00

README.md

Nested Forms - An exploration of alternatives

The official Angular documentation discussing 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 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 application implements the contact management form in a single angular component, directly using the example techniques from the Reactive Forms documentation.

Components Creating Own Form Controls

Searching the Internet for examples of nested forms in Angular shows 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. See, for example, Nested Reactive Forms in Angular2.

The 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 application explores this approach.

Parent Component Creates Form ; Child Components Define Structure

Another approach is to allow the parent component to maintain control of creating the full Reactive Form, while allowing each child component to define the shape of the form data by means of static factory methods defined within the child component code.

The Static Method application explores this approach.