如何在 Angular 中管理大量类似的响应式表单答案

【问题标题】：How to manage large numbers of similar Reactive Forms in Angular如何在 Angular 中管理大量类似的响应式表单
【发布时间】：2018-12-26 03:03:20
【问题描述】：

我正在开发一个包含大量表单的 Angular 6 项目。一个 FormGroup 可以包含超过 10 个字段，并且可以在一个应用程序中多次重复使用。

所以，我在问如何更好地组织我的应用程序？目前，一个form.component.ts 有超过 200 行代码，其中大约 70% 的表单正在创建。

有没有办法将其拆分为可重复使用的部分？我尝试使用static 方法创建一个类，该方法返回由FormBuilder 制作的FormGroup，但这似乎不起作用。

这是关于

export class myClass {
  constructor(private fb: FormBuilder) {}

  static createFormGroup(): FormGroup {
    this.fb.group({
      // some stuff goes here
    });
  }
}

我不知道如何处理这个问题，因为实例是静态的，所以不会被创建。

【问题讨论】：

您可以将您的 FormGroup 传递给其他组件并动态添加 FormControls。
你能解释一下怎么做吗？（我有一组应该出现在该组中的 FormControls）
stackoverflow.com/questions/53588169/…
您的 FormGroup 可以通过 @Input() 在子组件中访问，也可以通过注入服务在任何组件中访问，但该服务将是单例的，这意味着将共享同一个实例。
你为什么认为我需要在某个地方传递那个formGroup？我有很多地方应该将它用作更大表单的一部分，并且应该在 formArray 中添加到那里

标签： angular angular-reactive-forms

【解决方案1】：

我认为在这里使用Dynamic Forms 将是一个明显的赢家。文档是这样说的：

构建手工制作的表单可能既昂贵又耗时，尤其是当您需要大量表单时，它们彼此相似，并且经常更改以满足快速变化的业务和监管要求。

根据描述业务对象模型的元数据动态创建表单可能更经济。

在我看来，您的情况与我完全相同。另外，我已经在上面的指南中划线了，所以你应该在那里得到一个Working Example。

但是，您的其他选择是：

使用将返回 FormGroups 的静态服务，然后您可以直接在当前表单中分配。从您的问题看来，这是您已经尝试过但没有取得多大成功的方法。您需要提供更多有关这方面的信息，让这里的人帮助您。
正如 Julien 所建议的，您可以将您的 FormGroup 分解为更小的组件，然后将您的原始/父 FormGroup 作为 @Input 传递给它们。然后，他们可以进一步将FormControls 或FormGroups 添加到那些原始/父FormGroup。请参阅我创建的 StackBlitz eg.，它演示了类似的内容。随着表单大小的增加，这可能会变得更加混乱。所以在这种情况下，我建议使用动态表单或选项 1。

【讨论】：