/wizard-form

Primary LanguageTypeScript

Wizard form

This is multi step form generated with Angular CLI version 1.1.3 and Angular Material

Project

  • The primary instance of the data form is represented by "FormDataService", which has all the necessary methods.
  • FormDataService checks the steps using "WorkflowService". The router uses WorkflowService to validate paths.
  • the input fields are checked by configured FormControl and FormGroup
  • Each step component gets the type of personal data for its input fields with Data serviced.
  • City field autocompleted by geobytes.com
  • Data is stored when the "Next" button is pressed.
  • Confirmation of the component shows the saved data using the "Send" and "Reset" buttons. Display show popup data. Reset - reset data.

Demo

p.s Since geobytes.com has used http, it is necessary to download scripts manually to run the application. It helps only for Heroku instance.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.


Feel free to contact me or make pull request/