angular2-multi-component-dynamic-form

A small playground using Angular2 which demonstrates a way to structure an application with a large dynamic form. There is routing so a form can be in multiple steps but the central form object in form of a service is persisted through the app. There are validations (default and custom) + additional customizations that might be needed and several other features.

Functionality

• Angular 2.1 ready!
• Dynamic rendering and customising for form fields
• Support for Text, Select, Radio and Checkboxes
• Large form broken over multiple components
• Single FormService managing all the form fields (using FormGroup and FormControl)
• Inter-dependant select fields (values in one are dependant on other)
• Validations over multiple components, show custom error messages via service
• Sidebar showing status of form in each component
• Field visibility dependant on service
• Control visibility using specific fields (via custom code in Compontent)
• IE9 Support (with some hacks) [pending testing post 2.1 final update]
• Clicking on text fields should empty them, if empty on blur restore the value
• Tooltips on input fields
• Injecting custom html blocks (non-form related) into components (ads, widgets etc)
• Highcharts integration
• Testing large forms (adding as we go along)

Additional Todos

• Upgrade to new forms module (RC5)
• Upgrade to AngularCLI Webpack
• Fix tests post upgrade to Angular2 final
• Fix E2E tests post upgrade to Angular2 final
• Fix all linting errors

How can I support developers?

• Star our GitHub repo ⭐
• Create pull requests, submit bugs, suggest new features or documentation updates 🔧
• Follow us on Twitter 🐾
• Like our page on Facebook 👍

Can I hire you guys?

Yes! Visit our homepage or simply send a note to [email protected]. We will be happy to work with you!

Setup

• Make sure you have node >= 4.0 & npm >= 3.0 installed on your machine? If you don't have, then install from here.
• Clone this repo: $ git clone https://github.com/recurship/angular2-multicomponent-form.git
• Install npm dependencies: $ npm install
• Install angular-cli: $ npm install angular-cli -g

Run

• $ ng serve
• http://localhost:4200/

e2e Tests

For running e2e tests you must need protractor and webdriver-manager globally installed on your machine. Follow up these commands if you don't have installed yet.

# Install webdriver-manager
$ npm install -g webdriver-manager

# Setting up a Selenium Server (By default it will download the selenium server jar and chromedriver binary.)
$ webdriver-manager update

# Install protractor
$ npm install -g protractor

After then, you need to first start selenium server anf then run tests:

• Starting the Selenium Server: $ webdriver-manager start i.e., By default, the selenium server will run on http://localhost:4444/wd/hub.

• run e2e tests: $ ng e2e