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.