/angular2-multicomponent-form

A demo app using a single form over multiple components + dynamic rendering using directives and services

Primary LanguageTypeScript

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 mashhoodr@recurship.com. 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