Best strategy for Angular Front-End Form Building by Users [closed] - node.js

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 3 years ago.
Improve this question
Good day, whoever reads this, thanks for taking the time to possibly assist!
Back in the day, I used to work a lot with Wordpress (PHP) and there was this plugin we used to gather metadata: Advanced Custom Fields (advancedcustomfields . com). What made it cool was that you could visually set up groups of questions (a form if you will), by selecting the types of questions and configure their setup and style (input with label in inside or outside, or, table with rows and columns specifying each key alongside which the answer would be saved against in the database).
I'm looking to build the exact same thing in Angular 8+, allowing my client to choose whatever type of field (input) they want and group them together. How do you suggest I go about this:
1) build custom components like: text input/area, radio, table, map, image, file upload, checkboxes, date/time pickers, select boxes, groups etc (each carrying conditional rules to show or not depending on some other component)... and then let the user choose the relevant parameters for each component and send them to the component ngOnInit() with #Input or a service?
2) does a similar package already exist for me to leverage such functionality quicker?
Appreciate the advice and input :)
Rgds,
Wzz

Answer 1

Have a look at ngx-formly. Another option is ng-dynamic-forms. These libraries have dynamically configurable input elements section.
ngx-formly code sample from their demo below:
app.component.ts
import { Component } from '#angular/core';
import {FormGroup} from '#angular/forms';
import {FormlyFieldConfig} from '#ngx-formly/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
})
export class AppComponent {
form = new FormGroup({});
model = {};
fields: FormlyFieldConfig[] = [
{
key: 'input',
type: 'input',
templateOptions: {
label: 'Input',
placeholder: 'Input placeholder',
required: true,
}
},
{
key: 'textarea',
type: 'textarea',
templateOptions: {
label: 'Textarea',
placeholder: 'Textarea placeholder',
required: true,
}
},
{
key: 'checkbox',
type: 'checkbox',
templateOptions: {
label: 'Checkbox',
}
},
{
key: 'select',
type: 'select',
templateOptions: {
label: 'Select',
placeholder: 'Select placeholder',
required: true,
options: [
{ label: 'Option 1', value: '1' },
{ label: 'Option 2', value: '2' },
{ label: 'Option 3', value: '3' },
]
}
},
{
key: 'radio',
type: 'radio',
templateOptions: {
label: 'Radio',
required: true,
options: [
{ label: 'Option 1', value: '1' },
{ label: 'Option 2', value: '2' },
]
}
}
];
onSubmit() {
if (this.form.valid) {
alert(JSON.stringify(this.model, null, 2));
}
}
}
app.component.html
<div class="header">
<img src="https://raw.githubusercontent.com/ngx-formly/ngx-formly/v5/logo.svg?sanitize=true" alt="" width="72" height="72">
<h4 class="mat-h2">Angular Formly Material</h4>
</div>
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<formly-form
[form]="form"
[model]="model"
[fields]="fields">
</formly-form>
<button type="submit" color="primary" mat-raised-button>
Submit
</button>
<button type="reset" color="warn" mat-raised-button>
Reset
</button>
</form>