\n Generate form controls, form array and form group.\n
\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\nstackblitz\n\n\n# ✔️ Version 2.7.0\n\n- Customizing form array title by setting titleClass property\n- Ability to define as many form group 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 form fields by [type](#field-types)\n- Ability to define as many form arrays with as many fields you want for each\n- Ability to define as many form group with as many fields you want for each\n- Has a config for Add button of form array\n- Ability to define the as many validation rules and error message of the field and the form array fields as desired\n- Has a config for form array divider\n- Ability to define Send, Reset and Cancel buttons with the desired title, color, and order\n- Binding form by object in edit mode\n- Bootstrap 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\nUse bootstrap V5
\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