Compare commits

..

No commits in common. "0cdd918cb4ce1b586084dc64252e05fc6bd32e04" and "f6a8f4ef20c1bfb010724009581bb498e1f34fce" have entirely different histories.

5 changed files with 71 additions and 101 deletions

View File

@ -1,27 +1,84 @@
# Nested Forms - An exploration of alternatives
# NestedForms
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.
This project was generated using [Nx](https://nx.dev).
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.
<p align="center"><img src="https://raw.githubusercontent.com/nrwl/nx/master/nx-logo.png" width="450"></p>
# Project Purpose
🔎 **Nx is a set of Extensible Dev Tools for Monorepos.**
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.
## Quick Start & Documentation
Each application implements a simple contact management form, capturing simple demographics information and a list of postal addresses.
[Nx Documentation](https://nx.dev/angular)
## Base Line - The Single component
[10-minute video showing all Nx features](https://nx.dev/angular/getting-started/what-is-nx)
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.
[Interactive Tutorial](https://nx.dev/angular/tutorial/01-create-application)
## Components Creating Own Form Controls
## Adding capabilities to your workspace
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.
Nx supports many plugins which add capabilities for developing different types of applications and different tools.
The [Parent Form](apps/parent-form/README.md) application explores this approach.
These capabilities include generating applications, libraries, etc as well as the devtools to test, and build projects as well.
## Parent Component Creates Form and Passes Form Controls Into Child Components
Below are some plugins which you can add to your workspace:
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.
- [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`
The [Global Form](apps/global-form/README.md) application explores this approach.
## 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.

View File

@ -1,84 +0,0 @@
# 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.

View File

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

View File

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

View File

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