用户构建 Angular 前端表单的最佳策略 [关闭]

Question

大家好，感谢您抽出宝贵时间提供帮助！

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

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

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

2) 是否已经有类似的软件包可供我更快地利用此类功能？

感谢您的建议和意见:)

Rgds, 呜呜呜

Answer 1

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

以下演示中的 ngx-formly 代码示例：

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>