form-generator-typescript

Form-generator

The provided TypeScript code defines a multi-step and one-step form generator with styling, validation, and dynamic creation of form elements based on a configuration object.

Installation

To install the form-generator library, you can use: npm install form-generator-typescript.

API Reference

Get all items

  GET /api/countries?apiKey=encrypted_api_key_here

Parameter	Type	Description
api_key	string	Required. Your API key

Get item

  GET /api/items/${id}

Parameter	Type	Description
id	string	Required. Id of item to fetch

Color Reference

Two form styles are available: 'form-style-one-step' supports both single and multi-step forms, while 'form-style-multi-step' is exclusively for multi-step forms. Colors are assigned to variables, so you can change them in the constructor of the class responsible for the selected style.

Form style one step

Color	Hex
First Color	#3498db
Second Color	#56d8e4
Third Color	#2980b9

Form style multi step

Color	Hex
First Color	#04AA6D
Second Color	#0b6e5b

Validator

The form validator checks the correctness of the email, phone number, password, and password confirmation fields. This class creates error messages if any of these inputs are entered incorrectly and removes them once the inputs are corrected.

Creating Form Elements

Form elements are created based on the provided configuration containing class names and an attributes file. Inputs are generated using the strategy design pattern. If you want to reduce/increase the number of inputs, you can do so in the config-attributes file, within the propertiesConfig object, by removing/adding fields or selects. If you want to modify the multi-step form, you can do so in the formPages object.

Selected Language

There are two available form languages: Polish and English. If you want to add another language, simply create a file named config-selectedLanguage and define the translation class selectedLanguage within it. In the config-attributes file, import the translation file and assign it to the variable const selectedLanguage = translationsSelectedLanguage.

Form Handler

In both versions of the form, all inputs provided in the configuration are created. Additionally, they include a paragraph containing information about the required fields to be filled in. After correctly filling out the form, a message will appear confirming successful submission.

Technologies Used

The project uses the following technologies: TypeScript, HTML, CSS.