搜索 Angular2 可视化表单编辑器或表单引擎，可以通过 GUI 或生成器或集中配置生成表单？ [关闭]答案

【问题标题】：Searching an Angular2 visual form editor or a form engine with the possibility to generate forms by GUI or generator or centralised config? [closed]搜索 Angular2 可视化表单编辑器或表单引擎，可以通过 GUI 或生成器或集中配置生成表单？ [关闭]
【发布时间】：2018-02-16 22:32:33
【问题描述】：

我们的开发组正在开发几个 Angular2

现在我们正在启动一些新项目，即使使用条件逻辑也需要更大的表单结构，并且这些项目可能会在未来几年内增长。我猜想直接使用 Typescript/Html 进行编码（即使使用拆分组件和服务）最终会产生大量冗余代码，其中每次表单更改或扩展都将成为未来的麻烦。

是否有任何具有 AngularJS 2 支持的表单可视化编辑器或允许具有某种 GUI 或生成器或集中配置的复杂表单结构的表单引擎？

我只想在 Angular2 中创建复杂的表单结构

【问题讨论】：

要求我们推荐或查找书籍、工具、软件库、教程或其他场外资源的问题对于 Stack Overflow 来说是无关紧要的，因为它们往往会吸引固执己见的答案和垃圾邮件。相反，请描述问题以及迄今为止为解决该问题所做的工作。

标签： javascript angular forms typescript

【解决方案1】：

我最近构建了一个 Angular 应用程序，表单包含 50 多个字段。我建议将其分解为小块，将form 实例传递给子组件。例如，拆分两个主要部分是 basic information 和 social media 创建自己的组件并将它们放入自己的组件中，一旦有任何更新（添加或删除），使用 @Input 和 @Output() 装饰器将它们传递回父级组件，父组件将在本地和远程（通过 HttpClient）更新更改。

 form = this.fb.group({
    basic: this.fb.group({
      name: '',
      description: ''
    }),
    social_media: this.fb.array([
      this.createSocialMedia({ sm_id: 1, sm_name: 'facebook' }),
      this.createSocialMedia({ sm_id: 3, sm_name: 'instagram' }),
    ])
  })

父模板：

 <div>
      <form [formGroup]="form" (ngSubmit)="onSubmit()">
        <app-basic
          [parent]="form">
        </app-basic>
        <app-social-media
          [parent]="form"
          [media]="social_media"
          (added)="addSocialMedia($event)">
        </app-social-media>
     </form>

子basic组件模板：

   <div [formGroup]="parent">
      <div formGroupName="basic">
        <input 
          type="text" 
          placeholder="Name"
          formControlName="name">
        <input 
          type="text" 
          placeholder="Description"
          formControlName="description">
      </div>
    </div>

现在，如果您想再添加一项功能，比如说billing information，您需要做的是添加 billing: this.fb.group({...//billing details}) 到您现有的 form 中，在父模板中渲染 <app-billing></app-billing>，然后构建用于计费本身的模板。

【讨论】：