New README file explaining project purpose

README.md

@@ -1,84 +1,27 @@
-# NestedForms
+# Nested Forms - An exploration of alternatives
 
-This project was generated using [Nx](https://nx.dev).
+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. 
 
-<p align="center"><img src="https://raw.githubusercontent.com/nrwl/nx/master/nx-logo.png" width="450"></p>
+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.
 
-🔎 **Nx is a set of Extensible Dev Tools for Monorepos.**
+# Project Purpose
 
-## Quick Start & Documentation
+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.
 
-[Nx Documentation](https://nx.dev/angular)
+Each application implements a simple contact management form, capturing simple demographics information and a list of postal addresses.
 
-[10-minute video showing all Nx features](https://nx.dev/angular/getting-started/what-is-nx)
+## Base Line - The Single component
 
-[Interactive Tutorial](https://nx.dev/angular/tutorial/01-create-application)
+The [Base Line](apps/baseline/README.md) 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.
 
-## Adding capabilities to your workspace
+## Components Creating Own Form Controls
 
-Nx supports many plugins which add capabilities for developing different types of applications and different tools.
+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.
 
-These capabilities include generating applications, libraries, etc as well as the devtools to test, and build projects as well.
+The [Parent Form](apps/parent-form/README.md) application explores this approach.
 
-Below are some plugins which you can add to your workspace:
+## Parent Component Creates Form and Passes Form Controls Into Child Components
 
-- [Angular](https://angular.io)
+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.
-  - `ng add @nrwl/angular`
-- [React](https://reactjs.org)
-  - `ng add @nrwl/react`
-- Web (no framework frontends)
-  - `ng add @nrwl/web`
-- [Nest](https://nestjs.com)
-  - `ng add @nrwl/nest`
-- [Express](https://expressjs.com)
-  - `ng add @nrwl/express`
-- [Node](https://nodejs.org)
-  - `ng add @nrwl/node`
 
-## Generate an application
+The [Global Form](apps/global-form/README.md) application explores this approach.
-
-Run `ng g @nrwl/angular:app my-app` to generate an application.
-
-> You can use any of the plugins above to generate applications as well.
-
-When using Nx, you can create multiple applications and libraries in the same workspace.
-
-## Generate a library
-
-Run `ng g @nrwl/angular:lib my-lib` to generate a library.
-
-> You can also use any of the plugins above to generate libraries as well.
-
-Libraries are sharable across libraries and applications. They can be imported from `@nested-forms/mylib`.
-
-## Development server
-
-Run `ng serve my-app` for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
-
-## Code scaffolding
-
-Run `ng g component my-component --project=my-app` to generate a new component.
-
-## Build
-
-Run `ng build my-app` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
-
-## Running unit tests
-
-Run `ng test my-app` to execute the unit tests via [Jest](https://jestjs.io).
-
-Run `nx affected:test` to execute the unit tests affected by a change.
-
-## Running end-to-end tests
-
-Run `ng e2e my-app` to execute the end-to-end tests via [Cypress](https://www.cypress.io).
-
-Run `nx affected:e2e` to execute the end-to-end tests affected by a change.
-
-## Understand your workspace
-
-Run `nx dep-graph` to see a diagram of the dependencies of your projects.
-
-## Further help
-
-Visit the [Nx Documentation](https://nx.dev/angular) to learn more.

README_NX.md

@@ -0,0 +1,84 @@
+# NestedForms
+
+This project was generated using [Nx](https://nx.dev).
+
+<p align="center"><img src="https://raw.githubusercontent.com/nrwl/nx/master/nx-logo.png" width="450"></p>
+
+🔎 **Nx is a set of Extensible Dev Tools for Monorepos.**
+
+## Quick Start & Documentation
+
+[Nx Documentation](https://nx.dev/angular)
+
+[10-minute video showing all Nx features](https://nx.dev/angular/getting-started/what-is-nx)
+
+[Interactive Tutorial](https://nx.dev/angular/tutorial/01-create-application)
+
+## Adding capabilities to your workspace
+
+Nx supports many plugins which add capabilities for developing different types of applications and different tools.
+
+These capabilities include generating applications, libraries, etc as well as the devtools to test, and build projects as well.
+
+Below are some plugins which you can add to your workspace:
+
+- [Angular](https://angular.io)
+  - `ng add @nrwl/angular`
+- [React](https://reactjs.org)
+  - `ng add @nrwl/react`
+- Web (no framework frontends)
+  - `ng add @nrwl/web`
+- [Nest](https://nestjs.com)
+  - `ng add @nrwl/nest`
+- [Express](https://expressjs.com)
+  - `ng add @nrwl/express`
+- [Node](https://nodejs.org)
+  - `ng add @nrwl/node`
+
+## Generate an application
+
+Run `ng g @nrwl/angular:app my-app` to generate an application.
+
+> You can use any of the plugins above to generate applications as well.
+
+When using Nx, you can create multiple applications and libraries in the same workspace.
+
+## Generate a library
+
+Run `ng g @nrwl/angular:lib my-lib` to generate a library.
+
+> You can also use any of the plugins above to generate libraries as well.
+
+Libraries are sharable across libraries and applications. They can be imported from `@nested-forms/mylib`.
+
+## Development server
+
+Run `ng serve my-app` for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng g component my-component --project=my-app` to generate a new component.
+
+## Build
+
+Run `ng build my-app` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+
+## Running unit tests
+
+Run `ng test my-app` to execute the unit tests via [Jest](https://jestjs.io).
+
+Run `nx affected:test` to execute the unit tests affected by a change.
+
+## Running end-to-end tests
+
+Run `ng e2e my-app` to execute the end-to-end tests via [Cypress](https://www.cypress.io).
+
+Run `nx affected:e2e` to execute the end-to-end tests affected by a change.
+
+## Understand your workspace
+
+Run `nx dep-graph` to see a diagram of the dependencies of your projects.
+
+## Further help
+
+Visit the [Nx Documentation](https://nx.dev/angular) to learn more.

apps/baseline/README.md

@@ -0,0 +1 @@
+# Base Line - The Single component

apps/global-form/README.md

@@ -0,0 +1 @@
+# Parent Component Creates Form and Passes Form Controls Into Child Components

apps/parent-form/README.md

@@ -0,0 +1 @@
+# Components Creating Own Form Controls