用户角度前端表单构建的最佳策略

Question

美好的一天，无论谁读到这篇文章，感谢您抽出宝贵时间提供帮助！

过去，我曾经使用Wordpress(PHP(做了很多工作，我们用来收集元数据的插件：高级自定义字段(advancedcustomfields .com(。让它很酷的是，您可以通过选择问题类型并配置它们的设置和样式(在内部或外部输入带有标签的输入，或者带有行和列的表格指定每个键，将答案保存在数据库中(来直观地设置问题组(如果您愿意，也可以使用表单(。

我希望在 Angular 8+ 中构建完全相同的东西，允许我的客户选择他们想要的任何类型的字段(输入(并将它们组合在一起。你建议我怎么做：

1(构建自定义组件，例如：文本输入/区域，收音机，表格，地图，图像，文件上传，复选框，日期/时间选择器，选择框，组等(每个都带有条件规则，以显示或不显示取决于其他组件(...然后让用户为每个组件选择相关参数，并将它们发送到组件 ngOnInit(( 与@Input或服务？

2( 是否已经存在类似的软件包，以便我更快地利用此类功能？

感谢您的建议和意见:)

Rgds， 嗡��

Answer 1

看看 ngx-formly。另一种选择是ng-dynamic-forms。这些库具有可动态配置的输入元素部分。

NGX 形式的代码示例来自下面的演示：

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>