{"id":15649373,"url":"https://github.com/asoftwareworld/asw-form-builder","last_synced_at":"2025-04-06T15:11:56.673Z","repository":{"id":39620792,"uuid":"287777436","full_name":"asoftwareworld/ASW-Form-Builder","owner":"asoftwareworld","description":"ASW Form Builder helps you with rapid development and designed web forms that include several controls. The key feature of Form Builder is to make your content attractive and effective. We can customize our control at run time and preview the same before final submission.","archived":false,"fork":false,"pushed_at":"2025-01-04T06:00:13.000Z","size":9046,"stargazers_count":42,"open_issues_count":13,"forks_count":24,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-30T14:09:50.961Z","etag":null,"topics":["angular","angular-components","angular-form-builder","angularmaterial","asw-form-builder","drag-and-drop","formbuilder","forms","typescript"],"latest_commit_sha":null,"homepage":"https://asoftwareworld.com/product/free-form-builder/demo","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/asoftwareworld.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2020-08-15T15:51:59.000Z","updated_at":"2024-11-22T12:28:18.000Z","dependencies_parsed_at":"2024-03-30T00:24:05.506Z","dependency_job_id":"b86343f9-3eb9-4b23-9346-658cff48bddf","html_url":"https://github.com/asoftwareworld/ASW-Form-Builder","commit_stats":{"total_commits":273,"total_committers":3,"mean_commits":91.0,"dds":0.4432234432234432,"last_synced_commit":"3d7a472b62d9d3bbcf75a1fc0ff012419bb412d7"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asoftwareworld%2FASW-Form-Builder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asoftwareworld%2FASW-Form-Builder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asoftwareworld%2FASW-Form-Builder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asoftwareworld%2FASW-Form-Builder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/asoftwareworld","download_url":"https://codeload.github.com/asoftwareworld/ASW-Form-Builder/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247500468,"owners_count":20948880,"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","angular-components","angular-form-builder","angularmaterial","asw-form-builder","drag-and-drop","formbuilder","forms","typescript"],"created_at":"2024-10-03T12:29:27.574Z","updated_at":"2025-04-06T15:11:56.654Z","avatar_url":"https://github.com/asoftwareworld.png","language":"TypeScript","funding_links":["https://ko-fi.com/anishsharma"],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eASW Form Builder - Design dynamic web forms.\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"asw.svg\" alt=\"asw-logo\" width=\"310px\" height=\"100px\"/\u003e\n  \u003cbr\u003e\n  \u003cem\u003eASW Form Builder helps you with rapid development and designed web forms which includes several controls\n    \u003cbr\u003e using Angular/Angular-Material and Bootstrap.\u003c/em\u003e\n  \u003cbr\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://asoftwareworld.com/product/free-form-builder/demo\"\u003e\u003cstrong\u003eAngular form builder demo\u003c/strong\u003e\u003c/a\u003e\n  \u003cbr\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"CONTRIBUTING.md\"\u003eContributing Guidelines\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/asoftwareworld/ASW-Form-Builder/issues\"\u003eSubmit an Issue\u003c/a\u003e\n    ·\n    \u003ca href=\"https://asoftwareworld.github.io/form-builder\"\u003eBlog\u003c/a\u003e\n    \u003cbr\u003e\n    \u003cbr\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://circleci.com/gh/asoftwareworld/ASW-Form-Builder\"\u003e\n        \u003cimg src=\"https://badge.fury.io/js/%40asoftwareworld%2Fform-builder.svg\" alt=\"CI status\" /\u003e\n    \u003c/a\u003e\u0026nbsp;\n    \u003ca href=\"https://www.npmjs.com/package/@asoftwareworld/form-builder\"\u003e\n        \u003cimg src=\"https://circleci.com/gh/asoftwareworld/ASW-Form-Builder.svg?style=svg\" alt=\"Asw form builder on npm\" /\u003e\n    \u003c/a\u003e\u0026nbsp;\n    \u003ca href=\"https://github.com/asoftwareworld/ASW-Form-Builder/blob/master/LICENSE\"\u003e\n        \u003cimg src=\"https://img.shields.io/badge/license-MIT-blue.svg\" alt=\"Discord conversation\" /\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n\u003chr\u003e\n\n# Documentation\n\n`ASW Form Builder` helps you with rapid development and designed web forms which includes several controls. The key feature of `Form Builder` is to make your content attractive and effective. We can customize our control at run time and preview the same before final submission.\n\n`Form Builder` is compatible with the latest version of Angular and Angular Material. Only a few clicks can create an attractive web form and provide a JSON Schema to render all controls.\n\n## Installation\nBelow are some prerequisites before install `Form Builder`.\n\n### Step 1: Install Angular Material\nInstall `Angular Material` by running the following command:\n\n```html\nng add @angular/material\n```\n\n### Step 2: Install Bootstrap\nInstall `Bootstrap` source Sass files by running the following command:\n```html\nnpm install bootstrap\n```\n\n### Step 3: Install ASW Form Builder\nInstall `Form Builder` to set up in the project by running the following command:\n```html\nnpm install @asoftwareworld/form-builder\n```\n\n### Step 4: Import the component modules\nImport the NgModule for each component you want to use:\n\n```\nimport { AswFormBuilderModule } from '@asoftwareworld/form-builder/form-builder';\nimport { AswPreviewTemplateModule } from '@asoftwareworld/form-builder/preview-template';\n// ...\n\n@NgModule({\n    imports: [\n        // shown passing global defaults (optional)\n        AswFormBuilderModule,\n        AswPreviewTemplateModule\n        ...\n    ]\n    // ...\n})\nexport class AppModule {}\n```\n### Step 5: Include a theme\n\nIncluding a theme is required to apply the form builder and controls design.\n\nYou can include this theme in component `SCSS or CSS` files to not use this globally in your application.\n\n```html\n@import '~@asoftwareworld/form-builder/theme/asw-theme.min.css';\n```\n\nIf you're using the Angular CLI, and you want to use themes globally in your application. Then you can add this to your `styles.css` or `angular.json`:\n\n`styles.css or styles.scss`:\n\n```html\n@import '~@asoftwareworld/form-builder/theme/asw-theme.min.css';\n```\nor \n\n`angular.json`:\n```html\n\"styles\": [\n  \"./node_modules/@asoftwareworld/form-builder/theme/asw-theme.min.css\"\n],\n```\n\nIf you are not using the Angular CLI, you can include a theme via a `\u003clink\u003e` element in your `index.html`.\n\n## Add a selector to HTML\nIn your template, use the component selector:\n```\n\u003casw-form-builder [uploadData]=\"jsonData1\"\n    [isShowPreviewButton]=\"isShowPreviewButton\"\n    [isShowJsonDataButton]=\"isShowJsonDataButton\"\n    [isShowPublishButton]=\"isShowPublishButton\"\n    (publishClick)=\"saveJsonData($event)\" \n    (previewClick)=\"previewTemplate($event)\"\n    (buttonClick)=\"buttonClick($event)\"\n    (aswModelChange)=\"onSelectionChange($event)\"\u003e\n\u003c/asw-form-builder\u003e\n```\nPreview Template, use the component selector in your HTML page:\n```\n\u003casw-preview-template [formContainer]=\"jsonData\" \n    (buttonClick)=\"buttonClick($event)\"\n    (aswModelChange)=\"onSelectionChange($event)\"\u003e\n\u003c/asw-preview-template\u003e\n```\n\nDefine in your component to get published event :\n\n```\nexport class AppComponent {\n    title = 'ASW Form Builder Demo';\n    jsonData: any[] = [];\n    jsonData1: any[] = [];\n    isShowPreviewButton = false;\n    isShowJsonDataButton = true;\n    isShowPublishButton = false;\n    \n    // Publish Template\n    saveJsonData(data: any){\n        //.... \n        console.log(data);\n        // do something\n    }\n    \n    //Preview Template\n    previewTemplate(data: any){\n        this.jsonData = data;\n    }\n\n    buttonClick(data: any): void {\n        console.log(data);\n    }\n\n    onSelectionChange(control: any): void {\n        console.log(control);\n    }\n}\n```\n## Theme\nAngular Material [more information](https://material.angular.io/components/categories) \nand Bootstrap [more information](https://getbootstrap.com/docs/4.0/getting-started/theming/)\n\n## List of Controls available\n| controls        | description                                                                                                     |\n| --------------- | --------------------------------------------------------------------------------------------------------------- |\n| Header          | Headings are defined with the `\u003ch1\u003e to \u003ch6\u003e` tags. Used as a title of the post, template and resume, etc.       |\n| Image Upload    | Upload image with crop, zoom in, zoom out, reset, rotate, swap etc. features.                                   |\n| Autocomplete    | The autocomplete is a normal text input enhanced by a panel of suggested relevant options as the user types.    |\n| Text field      | Enable native inputs to be used within a form field. The styles such as the underline, floating label.          |\n| Text area       | Enable native inputs to be used within a form field. The styles such as the underline, floating label.          |\n| Datepicker      | The datepicker allows users to enter a date either through text input, or by choosing a date from the calendar. |\n| Select          | Allows the user to select only one option using dropdown.                                                       |\n| Multi select    | Allows the user to select one or more options using dropdown.                                                   |\n| Radio button    | Allows the user to select only one option from a group.                                                         |\n| Checkbox button | Use multi select check box or single checkbox and captures boolean input with an optional indeterminate mode.   |\n| Button          | Angular Material interactive button with a range of presentation options.                                       |\n| Paragraph       | Paragraphs are the building blocks of papers.                                                                   |\n| Divider         | Create a horizontal or vertical line styled with a Angular Material theme                                       |\n| Slide toggle    | Is an on/off control that can be toggled via clicking and draggable switch.                                     |\n| Grid            | Configure bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content.   |\n| GPS             | Add google map key in [index.html](https://github.com/asoftwareworld/ASW-Form-Builder/blob/master/src/index.html) file to use GPS feature.|\n| QR Code         | ASW QR Code library for generating QR Code for Angular projects. [Readme](https://github.com/asoftwareworld/asw-qr-code/blob/main/README.md) file to use feature.|\n| Signature       | This control allow for digital signature and display the result. (Uses canvas \u0026 fabric.js).|\n| Image Drawing   | This control allow to draw on Image and display the result. (Uses canvas \u0026 fabric.js).|\n\n\n## Browser Support\n\n| ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | \n| ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | \n| Latest ✔                                                                                 | Latest ✔                                                                                    | Latest ✔                                                                                 | Latest ✔                                                                              | Latest ✔                                                                                                                                                                                                    |\n## [Report a bug](https://github.com/asoftwareworld/ASW-Form-Builder/issues)\nWe use GitHub Issues as the official bug tracker for the ASW Form Builder. Here are some advices for our users that want to report an issue:\n\n1. Make sure that you are using the latest version of the ASW Form Builder.\n2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.\n3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.\n\n## Technical Support or Questions\nIf you have questions or need help please email `asoftwareworld@gmail.com`\n\n## License\n[MIT](https://github.com/asoftwareworld/ASW-Form-Builder/blob/master/LICENSE)\n\n## Social Media\n\nTwitter: \u003chttps://twitter.com/asoftwareworld\u003e\n\nLinkedIn: \u003chttps://in.linkedin.com/company/asoftwareworld\u003e\n\nFacebook: \u003chttps://www.facebook.com/asoftwaresworld\u003e\n\n(https://github.com/asoftwareworld/ASW-Form-Builder)\n\n**Love ASW Form Builder? Give our repo a star :star: :arrow_up:.**\n\n## Donate\n\u003ca href=\"https://ko-fi.com/anishsharma\"\u003e\u003cimg src=\"blue.svg\" height=\"40\"\u003e\u003c/a\u003e  \nIf this project help you reduce time to develop, you can give me a cup of coffee :)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasoftwareworld%2Fasw-form-builder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fasoftwareworld%2Fasw-form-builder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasoftwareworld%2Fasw-form-builder/lists"}