{"id":15823279,"url":"https://github.com/hakimesheikhalishahi/sh-dynamic-form-builder","last_synced_at":"2025-03-15T01:31:40.932Z","repository":{"id":37424154,"uuid":"476644446","full_name":"HakimeSheikhalishahi/sh-dynamic-form-builder","owner":"HakimeSheikhalishahi","description":"Angular dynamic form builder","archived":false,"fork":false,"pushed_at":"2024-02-15T09:32:23.000Z","size":2215,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-06T08:06:52.460Z","etag":null,"topics":["angular","dynamic-form-builder","reactiveform-validation","reactiveforms"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/HakimeSheikhalishahi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-04-01T08:51:05.000Z","updated_at":"2024-01-29T23:24:09.000Z","dependencies_parsed_at":"2024-10-26T13:28:40.491Z","dependency_job_id":"0bfc429e-ac9e-4862-9cf5-45e6e0112a9e","html_url":"https://github.com/HakimeSheikhalishahi/sh-dynamic-form-builder","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HakimeSheikhalishahi%2Fsh-dynamic-form-builder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HakimeSheikhalishahi%2Fsh-dynamic-form-builder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HakimeSheikhalishahi%2Fsh-dynamic-form-builder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HakimeSheikhalishahi%2Fsh-dynamic-form-builder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HakimeSheikhalishahi","download_url":"https://codeload.github.com/HakimeSheikhalishahi/sh-dynamic-form-builder/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243671206,"owners_count":20328582,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","dynamic-form-builder","reactiveform-validation","reactiveforms"],"created_at":"2024-10-05T08:07:37.978Z","updated_at":"2025-03-15T01:31:40.446Z","avatar_url":"https://github.com/HakimeSheikhalishahi.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch2 align=\"center\"\u003eReactive Form Builder for Angular\u003c/h2\u003e\n\n\u003cp align=\"center\"\u003e\n Generate form controls, form array and form group.\n \u003c/p\u003e\n \n ![todo](https://user-images.githubusercontent.com/51107856/162959789-21243f3c-e5ad-4bad-abf6-9fe602653c44.png?raw=true \"Dynamic Form Builder\")\n# Demo\n\n\u003ca href='https://stackblitz.com/edit/angular-masgfg?file=src%2Fapp%2Fapp.component.html'\u003e\nstackblitz\n\u003c/a\u003e\n\n# ✔️ Version 2.7.0\n\n- Customizing form array title by setting titleClass property\n- Ability to define as many \u003cb\u003eform group\u003c/b\u003e with as many fields you want for each\n- Setting full with buttons for mobile and another device size by setting fullWidthButtons property\n\n# ✔️ Version 2.6.0\n\n- Sizing for control and label by values: small,medium and large.Default is medium\n- Red color added to color of buttons\n- Simple validation error style has added that shows red text without background color.You can reached it by setting simpleValidationError:true\n\n# Some Features\n\n- Ability to define \u003cb\u003eform fields\u003c/b\u003e by [type](#field-types)\n- Ability to define as many \u003cb\u003eform arrays\u003c/b\u003e with as many fields you want for each\n- Ability to define as many \u003cb\u003eform group\u003c/b\u003e with as many fields you want for each\n- Has a config for \u003cb\u003eAdd button\u003c/b\u003e of form array\n- Ability to define the as many \u003cb\u003evalidation\u003c/b\u003e rules and error message of the field and the form array fields as desired\n- Has a config for \u003cb\u003eform array divider\u003c/b\u003e\n- Ability to define Send, Reset and Cancel \u003cb\u003ebuttons\u003c/b\u003e with the desired title, color, and order\n- Binding form by object in edit mode\n- \u003cb\u003eBootstrap\u003c/b\u003e style\n\n# Field types\n\n- `Text`\n- `Range`\n- `Number`\n- `Password`\n- `Color`\n- `Dropdown`\n- `Radio`\n- `Checkbox`\n- `File`\n- `Date`\n- `Datetime local`\n- `Time`\n- `Week`\n- `Month`\n- `Form array`\n- `Form group`\n\n## Table of contents\n\n- [Install](#install)\n- [Quick start](#quick-start)\n- [Import style and icon](#import-style-and-icon)\n- [How to use?](#how-to-use)\n- [Input](#input)\n- [Output](#output)\n- [Field properties and methods](#field-properties-and-methods)\n- [Button setting](#button-setting)\n- [Validators](#validators)\n- [Creator](#creator)\n- [License](#license)\n\n# Install\n\n```bash\nnpm i sh-dynamic-form-builder\n```\n\n## Install dependencies\n\n\u003cp\u003eUse bootstrap V5\u003c/p\u003e\n\n```bash\nnpm install bootstrap --save\n```\n\n```bash\nnpm install bootstrap-icons --save\n```\n\n```bash\nnpm install sh-ordinal-numbers --save\n```\n\n# Quick start\n\n```typescript\nimport { DynamicFormBuilderModule } from \"sh-dynamic-form-builder\";\n\n@NgModule({\n  imports: [DynamicFormBuilderModule],\n})\nexport class AppModule {}\n```\n\n# Import style and icon\n\n## In angular.json\n\n```json\n\"styles\": [\n    \"src/styles.scss\",\n    \"./node_modules/bootstrap/dist/css/bootstrap.min.css\"\n    \"./node_modules/bootstrap-icons/font/bootstrap-icons.scss\"\n]\n```\n\nIf Bootstrap icons don't work, you should import them in global style.\n\n```css\n@import \"~bootstrap-icons/font/bootstrap-icons\";\n```\n\n# How to use?\n\n## In component\n\n```typescript\nformGroup = new FormGroup({});\nisSubmit: boolean = false;\n```\n\n```typescript\nconfig: IFormConfig = {\n    title: 'Profile',\n    fields: [\n      {\n        type: 'text', name: 'fullName', label: 'Full name', id: 'fullName',\n        validators: [\n          { rule: 'required', msg: 'Full name is required' },\n          { rule: 'minlength', value: 6, msg: 'Full name must be at least 6 characters long' },\n\n        ],\n      },\n      {\n        type: 'form-array',\n        label: 'Tasks',\n        name: 'tasks',\n        formArray: {\n          simpleAddButton: true,\n          addButtonBGColor: 'green',\n          fields: [\n            {\n              type: 'text', name: 'title', label: 'title', validators: [\n                { rule: 'required', msg: 'title is required!' },\n                { rule: 'maxlength', value: 50, msg: 'Maximum length should be 50 characters' }\n              ]\n            },\n            {\n              type: 'date', name: 'dueDate', label: 'due date', validators: [\n                { rule: 'required', msg: 'date is required!' }\n              ]\n            }\n          ]\n        }\n      },\n      {\n        type: 'text', name: 'email1', label: 'E-mail',\n        validators: [\n          { rule: 'email', msg: 'E-mail is wrong' }\n        ],\n      },\n      {\n        type: 'file', name: 'avatar', label: 'Avatar',\n        onUpload: this.onUpload.bind(this), multipleFile: true\n      }\n      ...\n        buttonSetting: {\n      fullWidthButtons: 'only-mobile',\n      buttons:\n        [\n          { type: 'submit', caption: 'Submit', bgColor: 'blue' },\n          { type: 'reset', caption: 'Reset', bgColor: 'orange' },\n          { type: 'cancel', caption: 'Cancel', bgColor: 'light' }\n        ]\n    }\n}\n```\n\n```typescript\nprivate onUpload(event: any): void {\n    const files = event.files;\n    ...\n}\n```\n\n```typescript\n public submit(event: FormGroup): void {\n    this.isSubmit = true;\n    this.formGroup = event;\n    /**Sending data ... */\n    this.isSubmit = false;\n }\n```\n\n```typescript\n public cancel(): void {\n    /** */\n }\n```\n\n## In template\n\n```html\n\u003cdiv class=\"container\"\u003e\n  \u003csh-dynamic-form-builder\n    [config]=\"config\"\n    [isSubmit]=\"isSubmit\"\n    (submit)=\"submit($event)\"\n  \u003e\n  \u003c/sh-dynamic-form-builder\u003e\n\u003c/div\u003e\n```\n\n# Input\n\n| Name              | Type          | Default | Required? | Description                                                                                                                                                                                        |\n| ----------------- | ------------- | ------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| [config](#config) | `IFormConfig` | `-`     | yes       | Form config                                                                                                                                                                                        |\n| formValue         | `object`      | `{}`    | -         | Adjust form values                                                                                                                                                                                 |\n| isSubmit          | `boolean`     | `false` | no        | Set in to your Submit Function. If it sets \"true\", Submit button will be disabled.When submit is clicked it must be set \"true\" value, when sending data will be ended it must be set \"false\" value |\n\n- ## Config\n\n| Name                                      | Type                 | Default | Required? | Description                                                                                                     |\n| ----------------------------------------- | -------------------- | ------- | --------- | --------------------------------------------------------------------------------------------------------------- |\n| [fields](#fields)                         | `IMainFieldItem`     | `-`     | yes       | Form fields                                                                                                     |\n| title                                     | `string`             | `-`     | no        | Form title                                                                                                      |\n| titleClass                                | `string`             | `-`     | no        | Set style for form title, you can add one or more class name split by space. for example:'class1 class2 class3' |\n| [buttonSetting](#button-setting)          | `IButtonSetting`     | `{}`    | yes       | Button setting                                                                                                  |\n| [formControlConfig](#form-control-config) | `IFormControlConfig` | `{}`    | yes       | Form controls configuration                                                                                     |\n\n- ### Form control config\n\n| Name                  | Type      | Default  | Required? | Description                                                       |\n| --------------------- | --------- | -------- | --------- | ----------------------------------------------------------------- |\n| elementSize           | `string`  | `medium` | no        | Control size and label size                                       |\n| simpleValidationError | `boolean` | `false`  | no        | Red text without background color as the validation error message |\n\n# Output\n\n| Name     | Type        | Description                                  |\n| -------- | ----------- | -------------------------------------------- |\n| (submit) | `FormGroup` | Output formGroup, when Submit button clicked |\n| (cancel) | `boolean`   | When the Cancel button has been clicked      |\n\n# Field properties and methods\n\n| Name                        | Type               | Default | Required? | Description                                                                                                                                                                               |\n| --------------------------- | ------------------ | ------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| type                        | `string`           | `-`     | yes       | Allowed values: `text`, `range`, `number`, `password`, `color`, `dropdown`, `radio`, `checkbox`, `file`, `date`, `datetime-local`, `time`, `week`, `month`, `form-group` and `form-array` |\n| name                        | `string`           | `-`     | yes       | Form control name                                                                                                                                                                         |\n| defaultValue                | `any`              | `-`     | no        | Form control default value                                                                                                                                                                |\n| placeholder                 | `string`           | `-`     | no        | Usable for text, number, password, dropdown and email                                                                                                                                     |\n| [[validators]](#Validators) | `IValidationRules` | `-`     | no        | Set validator rules and error messages                                                                                                                                                    |\n| id                          | `string`           | `-`     | no        | Element id                                                                                                                                                                                |\n| width                       | `number`           | `100%`  | no        | Width of Control                                                                                                                                                                          |\n| disable                     | `boolean`          | `false` | no        | Disable control                                                                                                                                                                           |\n\n- ## File\n\n  | Name                     | Type      | Default | Required? | Description                |\n  | ------------------------ | --------- | ------- | --------- | -------------------------- |\n  | [onUpload](#upload-file) | `void`    | `-`     | yes       | File selection event.      |\n  | multipleFile             | `boolean` | `false` | no        | Allow choice multiple file |\n\n- ## Text\n\n  | Name      | Type      | Default | Required? | Description                                           |\n  | --------- | --------- | ------- | --------- | ----------------------------------------------------- |\n  | multiline | `boolean` | `false` | no        | Multiline handling                                    |\n  | rowCount  | `number`  | `5`     | no        | Specifies the visible height of a text area, in lines |\n\n- ## Radio\n\n  | Name      | Type      | Default | Required? | Description                                  |\n  | --------- | --------- | ------- | --------- | -------------------------------------------- |\n  | [options] | `IOption` | `-`     | yes       | Define options: {key: string;label: string;} |\n  | inline    | `boolean` | `false` | no        | Show on the same horizontal row              |\n\n- ## dropdown\n\n  | Name      | Type      | Default | Required? | Description                                  |\n  | --------- | --------- | ------- | --------- | -------------------------------------------- |\n  | [options] | `IOption` | `-`     | yes       | Define options: {key: string;label: string;} |\n\n- ## Range\n\n  | Name      | Type     | Default | Required? | Description       |\n  | --------- | -------- | ------- | --------- | ----------------- |\n  | rangeMin  | `number` | `0`     | no        | value of the min  |\n  | rangeMax  | `number` | `100`   | no        | value of the max  |\n  | rangeStep | `number` | `1`     | no        | value of the step |\n\n  - ## Form-group\n\n  | Name                    | Type         | Default | Required? | Description                           |\n  | ----------------------- | ------------ | ------- | --------- | ------------------------------------- |\n  | [formGroup](#formGroup) | `IFormGroup` | `-`     | no        | Set form group fields and validations |\n\n  - ### FormGroup\n\n  | Name       | Type                  | Default | Required? | Description                                                                                                           |\n  | ---------- | --------------------- | ------- | --------- | --------------------------------------------------------------------------------------------------------------------- |\n  | [fields]   | `IFormGroupFieldItem` | `-`     | yes       | Form group fields                                                                                                     |\n  | titleClass | `string`              | `-`     | no        | Set style for form group title, you can add one or more class name split by space. for example:'class1 class2 class3' |\n  | showInCard | `boolean`             | `false` | no        | Show in bootstrap card                                                                                                |\n\n- ## Form-array\n\n  | Name                    | Type         | Default | Required? | Description                           |\n  | ----------------------- | ------------ | ------- | --------- | ------------------------------------- |\n  | [formArray](#formArray) | `IFormArray` | `-`     | no        | Set form array fields and validations |\n\n  - ### FormArray\n\n    | Name                | Type                  | Default | Required? | Description                                                                  |\n    | ------------------- | --------------------- | ------- | --------- | ---------------------------------------------------------------------------- |\n    | [fields]            | `IFormArrayFieldItem` | `-`     | yes       | Form array fields                                                            |\n    | simpleAddButton     | `boolean`             | `false` | no        | Only icon on button, without text                                            |\n    | addButtonBGColor    | `string`              | `gray`  | no        | Allowed values: `gray`, `green`, `blue`, `red`, `orange`, `light` and `dark` |\n    | [divider](#divider) | `IDivider`            | `-`     | no        | doesn't show an ordinal number in the center of the divider line             |\n\n    - #### Divider\n      | Name                  | Type      | Default | Required? | Description                                                                                                                              |\n      | --------------------- | --------- | ------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------- |\n      | suppress              | `boolean` | `false` | no        | Doesn't show divider                                                                                                                     |\n      | lineClass             | `string`  | `-`     | no        | Set style for divider line, you can add one or more class name split by space. for example:'class1 class2 class3'                        |\n      | ordinalNumberClass    | `string`  | `-`     | no        | Set style for ordinal number between divider line, you can add one or more class name split by space. for example:'class1 class2 class3' |\n      | suppressOrdinalNumber | `boolean` | `false` | no        | Doesn't show an ordinal number in the center of the divider line                                                                         |\n      | height                | `number`  | `3`     | no        | The height of divider                                                                                                                    |\n\n# Button setting\n\n| Name                            | Type      | Default | Required? | Description                                  |\n| ------------------------------- | --------- | ------- | --------- | -------------------------------------------- |\n| [[buttons]](#button-properties) | `IButton` | `[]`    | yes       | The array of buttons, order by definition    |\n| buttonsAlign                    | `string`  | `left`  | no        | Usable when fullWidthButtons is false        |\n| fullWidthButtons                | `string`  | `none`  | no        | Allowed values: `none`, `all`, `only-mobile` |\n\n- # Button properties\n\n| Name    | Type     | Required? | Description                                                                  |\n| ------- | -------- | --------- | ---------------------------------------------------------------------------- |\n| type    | `string` | yes       | Allowed values: `submit`, `cancel` and `reset`                               |\n| caption | `string` | yes       | Button caption                                                               |\n| bgColor | `string` | yes       | Allowed values: `gray`, `green`, `blue`, `red`, `orange`, `light` and `dark` |\n\n# Validators\n\n| name                     | type     | Required | Description                                               |\n| ------------------------ | -------- | -------- | --------------------------------------------------------- |\n| [rule](#validator-rules) | `string` | yes      | Define rules                                              |\n| msg                      | `string` | yes      | Error message                                             |\n| value                    | `any`    | no       | Usable for min, max,pattern,minlength and maxlength rules |\n\n- ## Validator rules\n\n| Name         | Type      | Description                                                                                                          |\n| ------------ | --------- | -------------------------------------------------------------------------------------------------------------------- |\n| min          | `number`  | Validator that requires the control's value to be greater than or equal to the provided number.                      |\n| max          | `number`  | Validator that requires the control's value to be less than or equal to the provided number.                         |\n| email        | `boolean` | Validator that requires the control's value pass an email validation test.                                           |\n| pattern      | `string`  | Validator that requires the control's value to match a regex pattern.                                                |\n| required     | `boolean` | Validator that requires the control have a non-empty value.                                                          |\n| requiredTrue | `boolean` | Validator that requires the control's value be true. This validator is commonly used for required checkboxes.        |\n| minLength    | `number`  | Validator that requires the length of the control's value to be greater than or equal to the provided minimum length |\n| maxLength    | `number`  | Validator that requires the length of the control's value to be less than or equal to the provided maximum length.   |\n\n# Creator\n\n**Hakime sheikhalishahi**\n\n- http://www.linkedin.com/in/hakime-sheikhalishahi\n- h.sheykhalishahi@gmail.com\n\n\n# License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhakimesheikhalishahi%2Fsh-dynamic-form-builder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhakimesheikhalishahi%2Fsh-dynamic-form-builder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhakimesheikhalishahi%2Fsh-dynamic-form-builder/lists"}