New README file explaining project purpose

master
Kevin C. Coram 2019-09-07 21:13:53 -04:00
parent 1da2f398fa
commit 0cdd918cb4
Signed by: kevin
GPG Key ID: 0342351B3D61AD35
4 changed files with 30 additions and 0 deletions

27
README.md Normal file
View File

@ -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.

1
apps/baseline/README.md Normal file
View File

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

View File

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

View File

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