Compare commits
No commits in common. "0cdd918cb4ce1b586084dc64252e05fc6bd32e04" and "f6a8f4ef20c1bfb010724009581bb498e1f34fce" have entirely different histories.
0cdd918cb4
...
f6a8f4ef20
85
README.md
85
README.md
|
@ -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.
|
||||
|
|
84
README_NX.md
84
README_NX.md
|
@ -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.
|
|
@ -1 +0,0 @@
|
|||
# Base Line - The Single component
|
|
@ -1 +0,0 @@
|
|||
# Parent Component Creates Form and Passes Form Controls Into Child Components
|
|
@ -1 +0,0 @@
|
|||
# Components Creating Own Form Controls
|
Loading…
Reference in New Issue