Angular Drag And Drop Form BuilderAngular Drag And Drop Form Builder
This is a concise front-end application developed with Angular. You can create a beautiful form with drag and drop visualizatio Average rating of 4.4 based on 5 votesAngular Drag And Drop Form Builder
This is a concise front-end application developed with Angular. You can create a beautiful form ... Average rating of 4.431 Support questions or comments
Please login or create an account to post a question or comment.
-
2 months ago"Angular Drag and Drop Form Builder offers a seamless, intuitive way to create dynamic forms with easy drag-and-drop functionality."
-
2 months agoI have a few questions about it:
Is this a plugin that I can integrate into my application? If so, how do I integrate it?
Is there a way to add custom events to buttons in the form?
Can I retrieve the values entered in the form after it’s filled out? -
2 months agodonamkhanh AuthorHi,
You can integrate this Form builder into your existing application by importing the modules/components. However, please note that the form builder's interface is currently displayed as a full-page screen, so you may need to fine-tune the interface slightly to fit your requirements. You can view the demo interface here: https://www.codester.com/items/preview/36816/angular-drag-and-drop-form-builder
Currently, the form builder only supports drag-and-drop components and saving them into a JSON structure (you can also render the components back from this JSON structure) and exporting these form elements to static HTML (using Bootstrap 5). If you want to render these as Angular forms (including adding custom events) or handle submissions, you'll need to code that part yourself.
-
2 months agoTikipro PurchasedExcuse me, how many components does it have and does it work for Angular 18?
-
2 months agodonamkhanh AuthorCurrently, this app support 13 elements and works fine with Angular 18
1. Section
2. Button
3. Text
4. Text field
5. Textarea
6. Dropdown
7. Checkbox
8. Radio
9. Image
10. Spacer
11. Separator
12. Social networks
13. Uploader
-
5 months agowilliamnguyen PurchasedFacing Issue for save response, Please any suggestions?
-
5 months agodonamkhanh AuthorWhat problem are you having?
-
5 months agowilliamnguyen PurchasedI create a questionnaire form and store the generated JSON and HTML code in a database. To display the questionnaire, I use an iframe and pass the HTML code into it, making the questionnaire visible to users.
However, I am now facing an issue: how can I capture and store the responses selected by the users? For instance, if a user enters their name or any, I need to save it in our database so that the submitted questionnaire can be viewed later.
How can I achieve this? -
5 months agodonamkhanh AuthorHi,
Unfortunately, this script does not support populate submitted data but you can change some small of code by adding `value` property to all components
Here is example for input component:
1. In srcappshareddrag-drop-contentinterfacesinput.interface.ts:
export interface InputInterface {
label: string;
field_name: null | string;
is_required: boolean;
show_label: boolean;
placeholder_text: string;
value?: any; // ~~> Add this line
}
2. In srcappshareddrag-drop-contentelementsinputinput.component.html:
<input
type="text"
class="form-control"
[ngClass]="{
'form-control-lg': formDesign.field_size === 'l',
'form-control-sm': formDesign.field_size === 's'
}"
[placeholder]="component.element.placeholder_text || ''"
[ngStyle]="{
'background-color': formDesign.field_background_color,
border:
'solid ' +
formDesign.field_border_width +
'px' +
formDesign.field_border_color,
'border-radius': formDesign.field_rounded_corners + 'px'
}"
[value]="component.element.value" // ~~> Add this line
/>
3. In srcappform-builderform-builder.component.ts about line 222:
element: {
label: 'Input label',
field_name: null,
is_required: false,
show_label: true,
placeholder_text: 'Placeholder text',
value: '', // ~~> Add this line
},
-
5 months agowilliamnguyen PurchasedThis CKEditor 4.12.1 version is not secure. Consider upgrading to the latest one, 4.24.0-lts
This CKEditor 4.24.0 version is not secure.
Builder showing this error -
5 months agowilliamnguyen Purchasedngx-ckeditor.js:78 CKEditor 4.x is missing (http://ckeditor.com/)
-
5 months agodonamkhanh AuthorHi,
As of 30 June 2023, CKEditor 4 is considered end-of-life (EOL) software. That means there are no new security patches, bug fixes, features or releases coming out for CKEditor 4. They also provide special edition called CKEditor 4 LTS (Long Term Support), is available under commercial terms. You can check more detail at https://ckeditor.com/ckeditor-4-support/
For free & quick fix, you can apply this trick:
Open srcstyles.scss, add this line at the bottom of file:
.cke_notification.cke_notification_warning { display: none; }
-
8 months agokitsonng PurchasedI had just purchased your product. Please advise if you have upgrade version which support anguar 16 or 17. Thanks
-
8 months agojshabbir PurchasedI need to integrate a dynamic form builder Module into our angular application. So, will you give complete source code and what are things you are going to provide? I need to detail information. Please help me out
-
8 months agodonamkhanh AuthorPls check my quote reply
-
8 months agohello brother i am Mvnthemes author of Zontal Arcade Game Portal Script, brother how i contact you directly
-
9 months agoCan you tell me should I use host for Angular's API because my server is crashing again and again
-
9 months agodonamkhanh AuthorHi codecanor0,
What do you mean about Angular's API? For Angular deployment, I just build to static files then upload to a hosting with Nginx/Apache webserver.
Please do not push your Angular code and run ng serve on hosting, it is not correct
-
9 months agoEyhab PurchasedI want paid support .. can help me ?
Information
Category | Scripts & Code / AngularJS |
First release | 24 April 2022 |
Last update | 13 August 2024 |
Files included | .css, .html, Javascript .js |
Tags | form builder, drag & drop, angular |