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

Question

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

以前，我经常使用 Wordpress (PHP)，我们使用这个插件来收集元数据：高级自定义字段 (advancedcustomfields .com)。让它很酷的是，您可以通过 select 设置问题类型并配置它们的设置和样式（在内部或外部输入标签，或者， table 行和列指定每个键，答案将与这些键一起保存在数据库中）。

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

1) 构建自定义组件，例如：文本 input/area、收音机、table、地图、图像、文件上传、复选框、date/time 选择器、select 框，组等（每个都带有条件规则以显示或不显示取决于其他组件）......然后让用户为每个组件选择相关参数并使用@Input或服务将它们发送到组件ngOnInit（）？

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

感谢您的建议和意见:)

Rgds, wzz

Answer 1

看看ngx-formly. Another option is 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>

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

Best strategy for Angular Front-End Form Building by Users

forms

mongodb

node.js

mean-stack

angular