搜索Angular2可视化表单编辑器或表单引擎，是否可以通过图形用户界面、生成器或集中配置生成表单？

Question

我们的开发团队中有几个Angular2<项目。虽然其他开发人员习惯于在我们的Angular 2<项目中直接使用Typescript和HTML标记来编写更大的表单，但我对这种方法并不是很满意。

现在我们正在开始一些新的项目，这些项目需要更大的表单结构，甚至需要条件逻辑，这些项目可能会在未来几年内增长。我猜测直接使用Typescript/Html (即使是拆分组件和服务)来编写它将会导致大量的冗余代码，其中每一次表单更改或扩展都将是未来的麻烦。

有没有支持AngularJS 2的表单的可视化编辑器或表单引擎，允许使用某种图形用户界面、生成器或集中配置来构建复杂的表单结构？

我只想用Angular2<创建复杂的表单结构，而不是毫无意义的编码开销。

Answer 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: this.fb.group({...//billing details})添加到现有的form中，在父模板中呈现<app-billing></app-billing>，然后构建用于计费的模板。