Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
This branch is 2 commits behind mashhoodr:master.

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


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.


  • 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 We will be happy to work with you!


  • 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
  • Install npm dependencies: $ npm install
  • Install angular-cli: $ npm install angular-cli -g


  • $ 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


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







No releases published


No packages published


  • TypeScript 83.6%
  • HTML 12.4%
  • JavaScript 3.6%
  • CSS 0.4%