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)
- 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
- Star our GitHub repo ⭐
- Create pull requests, submit bugs, suggest new features or documentation updates 🔧
- Follow us on Twitter 🐾
- Like our page on Facebook 👍
Yes! Visit our homepage or simply send a note to [email protected]. 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 https://github.com/recurship/angular2-multicomponent-form.git
- Install npm dependencies:
$ npm install
- Install angular-cli:
$ npm install angular-cli -g
$ ng serve
http://localhost:4200/
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 onhttp://localhost:4444/wd/hub
. -
run e2e tests:
$ ng e2e