From 0cdd918cb4ce1b586084dc64252e05fc6bd32e04 Mon Sep 17 00:00:00 2001
From: "Kevin C. Coram" <kcoram@gmail.com>
Date: Sat, 7 Sep 2019 21:13:53 -0400
Subject: [PATCH] New README file explaining project purpose

---
 README.md                  | 27 +++++++++++++++++++++++++++
 apps/baseline/README.md    |  1 +
 apps/global-form/README.md |  1 +
 apps/parent-form/README.md |  1 +
 4 files changed, 30 insertions(+)
 create mode 100644 README.md
 create mode 100644 apps/baseline/README.md
 create mode 100644 apps/global-form/README.md
 create mode 100644 apps/parent-form/README.md

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..f1a8fa1
--- /dev/null
+++ b/README.md
@@ -0,0 +1,27 @@
+# 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/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.
+
+## 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/README.md) 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/README.md) application explores this approach.
\ No newline at end of file
diff --git a/apps/baseline/README.md b/apps/baseline/README.md
new file mode 100644
index 0000000..e6d79b7
--- /dev/null
+++ b/apps/baseline/README.md
@@ -0,0 +1 @@
+# Base Line - The Single component
diff --git a/apps/global-form/README.md b/apps/global-form/README.md
new file mode 100644
index 0000000..2fd8700
--- /dev/null
+++ b/apps/global-form/README.md
@@ -0,0 +1 @@
+# Parent Component Creates Form and Passes Form Controls Into Child Components
diff --git a/apps/parent-form/README.md b/apps/parent-form/README.md
new file mode 100644
index 0000000..d5dab4d
--- /dev/null
+++ b/apps/parent-form/README.md
@@ -0,0 +1 @@
+# Components Creating Own Form Controls